グラフのポイント上にカーソルを置いたときにカーソルスタイルをポインタに変更するにはどうすればよいですか？

Question

私はchart.js v.2を使用しています。ライブラリと私はカーソルのスタイルを 'ポインタ'に変更しようとしているときに、ユーザーがチャートのポイントをホバリングしています。 （私はバー、パイ、折れ線グラフでこれを使用します）。このオプションは、charts.js v.2でサポートされるはずです。私はどこにでもサンプルを見つけることができません。

編集： 私は反応を伴うチャートを使用しているとは言及していませんでした。具体的には、私はこれを使用していますreact wrapper。

グラフのラインimport { Line } from 'react-chartjs-2';

class ChartTimelineChart extends Component { 



constructor(props){ 
    super(props); 

    this.options = { 
     responsive: true, 
     maintainAspectRatio: false, 
     animation: { 
      easing: 'easeOutCirc', 
      duration: 1000 
     }, 
     pointStyle : 'circle', 
      scales: { 
       xAxes: [{ 
        display: true, 
        gridLines: {display: false}, 
        scaleLabel: {display: true} 
       }], 
       yAxes: [{ 
        display: true, 
        gridLines: {display: false}, 
        ticks: {beginAtZero:true}, 
        scaleLabel: {display: true} 
       }] 
      }, 
     tooltips: { 
     displayColors: false 
     }, 
     legend: false 
    }; 


    searchChart(elem, props, data) { 
    //Something... 
    } 

    render(){ 

    return (
     (this.props.selectedYears.length) 
     ? ( <div> 
      <Line data={this.props.selectedYearsData} 
       redraw={true} 
       options={this.options} 
       getElementAtEvent={elem => this.searchChart(elem, this.props, this.props.selectedYearsData)} /> 
     </div>) 
     : <Line data={{datasets: [], labels: []}} 
       redraw={true} 
       options={this.options} /> 
    ) 
    } 
}; 

Answer 1

私は、棒グラフのためにそれをやったが、私は解決策があまりにもあなたのために働くかもしれないと考えています。 コールバックを設定できる「chart-hover」というプロパティがあります。これは、チャートバーに入るたびに離れるたびにトリガされます。

これは私のキャンバスがどのように見えるかです：

<canvas id="bar-material" chart-hover="onHover" class="chart-horizontal-bar" chart-data="chartData" chart-labels="labels" chart-series="series" chart-colors="colors" chart-options="options" chart-click="onClick" height="160"> 
</canvas> 

これは onHoverは私のコントローラ上でどのように見えるかです：

$scope.onHover = function (points, evt) { 
    if (points.length === 0) { 
     evt.toElement.attributes.style.nodeValue = evt.toElement.attributes.style.nodeValue.replace("cursor: pointer;", "") 
     return; 
    } 
    var res = evt.toElement.attributes.style.nodeValue.match(/cursor: pointer;/); 
    if (res == null) { 
     evt.toElement.attributes.style.nodeValue += "cursor: pointer;" 
    } 
};