人力車圖表的onClick選項

我想知道是否實際上對數據點上的onclick事件提供了開箱即用的支持，或者我必須修改庫以使其可用。我掃描了源代碼的某些部分，但沒有看到允許綁定自定義點擊操作的任何內容。他們網站上的教程也不顯示此選項（http://code.shutterstock.com/rickshaw/）。人力車圖表的onClick選項

任何幫助都是值得讚賞的。我目前正在評估flot，人力車和flotr2。到目前爲止，沒有一個滿足所有要求，除了flot之外，我非常驚訝，在其他庫中沒有自定義onClick事件的選項。我看到有些人爲flotr2添加了一些hack-ish方法，但它僅限於條形圖。

來源

2012-05-07 juminoz

你試過HighCharts.js嗎？它是一個JavaScript庫，用於創建生動的圖表和圖表。

http://www.highcharts.com/

您可以自定義onclick事件調用javascript函數磨片使用HighCharts。

來源

2013-11-01 20:11:42 SRay

你必須付出代價的問題是，他們必須是真正令人驚歎的，但經過評估後，他們都不是。只需付一位D3專家就可以長期提供一些東西，這樣更便宜。 – juminoz

這是一個黑客，但我有相同的要求。我已經有一個HoverDetail對象掛鉤，所以我迷上了HoverDetail對象的onShow事件來存儲所選項目的x標籤的值。

（這是一個角度的應用程序，所以這就是爲什麼我設置的範圍變量）

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

然後，我迷上了正常的單擊處理程序的圖形，並訪問由存儲變量那裏的onShow處理程序。

有關如何與HoverDetail對象和其他人力車結構工作的詳細信息看看這個截屏：http://tagtree.tv/d3-with-rickshaw-and-angular

來源

2014-01-07 14:52:39 hendrikswan

很棒的建議。在我的情況下，HoverDetail格式化程序：函數已經顯示了我需要鏈接的信息，所以我甚至不需要onShow：方法，我只是爲圖表設置了一個onclick事件，它像這樣獲取活動項目文本：' $（'＃chart'）。on（'click'，function（）{var s = $（「＃chart .detail div.item.active」）。text（）; if（s is appropriate）window.open someFunc（s））;}）;' – patricksurry

我得出這個從HoverDetail，這似乎工作至今：

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 
     ); 
    } 
});

用法是這樣的：

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

來源

2015-04-13 15:28:10 Adrian

真的只是這樣，我可以說「真棒，很好地完成」...如何通過一個日期。哦。價值。甜美 –

-1

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

試過並測試過;）

來源

2017-02-15 10:31:26

人力車圖表的onClick選項

回答

相關問題