onClick Option for Rickshaw Biểu đồ

Question

Tôi đã tự hỏi nếu có thực sự là một hỗ trợ out-of-the-box cho onclick sự kiện trên một điểm dữ liệu hoặc tôi phải sửa đổi thư viện để làm cho nó hoạt động. Tôi đã quét qua một số phần của mã nguồn và tôi không thấy bất kỳ thứ gì cho phép các hành động nhấp chuột tùy chỉnh ràng buộc. Hướng dẫn trên trang web của họ cũng không hiển thị tùy chọn này (http://code.shutterstock.com/rickshaw/).

Bất kỳ trợ giúp nào đều đánh giá cao. Tôi hiện đang đánh giá giữa flot, rickshaw và flotr2. Cho đến nay không ai trong số họ đáp ứng tất cả các yêu cầu và tôi rất ngạc nhiên với ngoại lệ của flot, không có tùy chọn cho sự kiện onClick tùy chỉnh trong các thư viện khác. Tôi thấy rằng một số người đã thêm một số cách hack-ish cho flotr2, nhưng nó rất cụ thể cho các biểu đồ thanh chỉ.

Answer 1

Bạn đã thử HighCharts.js chưa? Thư viện javascript của nó được sử dụng để tạo biểu đồ và biểu đồ intearctive.

http://www.highcharts.com/

Bạn có thể tùy chỉnh sự kiện onclick để gọi một hàm javascript whe sử dụng HighCharts.

Answer 2

Đây là một chút hack, nhưng tôi có cùng yêu cầu. Tôi đã có một đối tượng HoverDetail được nối, vì vậy tôi đã nối vào sự kiện onShow của đối tượng HoverDetail để lưu trữ giá trị của nhãn x của mục đã chọn.

(Đây là trong một ứng dụng góc cạnh, vì vậy đó là lý do tại sao tôi đang thiết lập các biến trên phạm vi)

var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
    onShow: function(event){ 
     scope.data.activeDate = $(".x_label").text(); 
    }, 
    graph: graph 
}); 

Sau đó, tôi nối handler nhấp chuột bình thường để đồ thị, và truy cập các biến được lưu trữ bởi trình xử lý onShow trong đó.

Để biết thêm thông tin về làm thế nào để làm việc với các đối tượng HoverDetail và cấu trúc xe kéo khác có một cái nhìn tại hình màn ảnh này: http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 3

Tôi đã có nguồn gốc từ HoverDetail, mà dường như làm việc cho đến nay:

Rickshaw.namespace('Rickshaw.Graph.ClickDetail'); 
Rickshaw.Graph.ClickDetail = Rickshaw.Class.create({ 

    initialize: function (args) { 
     this.graph = args.graph; 
     this.clickHandler = args.clickHandler || function(data){}; 
     this.lastEvent = null; 
     this._addListeners(); 
    }, 

    update: function (e) { 

     e = e || this.lastEvent; 
     if (!e) return; 
     this.lastEvent = e; 

     if (!e.target.nodeName.match(/^(path|svg|rect|circle)$/)) return; 

     var graph = this.graph; 

     var eventX = e.offsetX || e.layerX; 
     var eventY = e.offsetY || e.layerY; 

     var j = 0; 
     var points = []; 
     var nearestPoint; 
     var nearestValue; 

     this.graph.series.active().forEach(function (series) { 

      var data = this.graph.stackedData[j++]; 

      if (!data.length) 
       return; 

      var domainX = graph.x.invert(eventX); 

      var domainIndexScale = d3.scale.linear() 
       .domain([data[0].x, data.slice(-1)[0].x]) 
       .range([0, data.length - 1]); 

      var approximateIndex = Math.round(domainIndexScale(domainX)); 
      if (approximateIndex == data.length - 1) approximateIndex--; 

      var dataIndex = Math.min(approximateIndex || 0, data.length - 1); 

      for (var i = approximateIndex; i < data.length - 1;) { 

       if (!data[i] || !data[i + 1]) break; 

       if (data[i].x <= domainX && data[i + 1].x > domainX) { 
        dataIndex = Math.abs(domainX - data[i].x) < Math.abs(domainX - data[i + 1].x) ? i : i + 1; 
        break; 
       } 

       if (data[i + 1].x <= domainX) { 
        i++ 
       } else { 
        i-- 
       } 
      } 

      if (dataIndex < 0) dataIndex = 0; 
      var value = data[dataIndex]; 
      var distance = Math.sqrt(
       Math.pow(Math.abs(graph.x(value.x) - eventX), 2) + 
       Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2) 
      ); 

      if (!nearestPoint || distance < nearestPoint.distance) { 
       nearestValue = value; 
      } 
     }, this); 
     if(nearestValue){ 
      this.clickHandler(nearestValue); 
     } 
    }, 

    render: function (args) { 
     // Do nothing 
    }, 

    _addListeners: function() { 
     this.graph.element.addEventListener(
      'click', 
      function (e) { 
       this.update(e); 
      }.bind(this), 
      false 
     ); 
    } 
}); 

Cách sử dụng như sau:

new Rickshaw.Graph.ClickDetail({ 
      graph: graph, 
      clickHandler: function(value){ 
       alert(value.x + ' ' + value.y); 
      } 
     }); 

Answer 4

$('#chart').on('click', 'svg rect' ,function() { 
     x = $(this)[0].__data__.x; //The value of x 
     y = $(this)[0].__data__.y; //The value of y 
     }); 

Đã thử và thử nghiệm;)