onClick Rickshaw Chartingのオプション

Question

実際にデータポイント上でonclickイベントがサポートされているかどうか、またはそれを動作させるためにライブラリを変更する必要があるのだろうかと思っていました。私はソースコードのいくつかの部分をスキャンして、カスタムのクリック操作をバインドすることはできませんでした。チュートリアルでは、このオプション（http://code.shutterstock.com/rickshaw/）も表示されません。

助けに感謝します。私は現在、flot、rickshaw、flotr2の間で評価しています。これまでのところ、すべての要件を満たすものはありませんでした。私はflotを除いて非常に驚いています。他のライブラリのカスタムonClickイベントのオプションはありません。私は、flotr2のためにいくつかのハッキング方法を追加した人がいることに気付きましたが、棒グラフに特有のものです。

Answer 1

HighCharts.jsを試しましたか？ intearctiveチャートとグラフを作成するために使用されるそのjavascriptライブラリ。

http://www.highcharts.com/

あなたはHighChartsを使用してWHE JavaScript関数を呼び出すためのonclickイベントをカスタマイズすることができます。

Answer 2

これはちょっとしたハックですが、同じ要件がありました。 私はすでにHoverDetailオブジェクトをフックアップしていました。そのため、選択したアイテムのxラベルの値を格納するHoverDetailオブジェクトのonShowイベントにフックしました。

（私はスコープに変数を設定しています理由ですので、これは、角度のアプリであった）

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

Answer 3

私はこれまで動作しているようです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); 
      } 
     }); 

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

試しとテスト;）