如何将光标样式更改为悬停在图表点上的指针？

Question

我正在使用 chart.js v.2。库，当用户将鼠标悬停在图表点上时，我试图将光标样式更改为“指针”。（我将把它用于条形图、饼图、折线图）。似乎 charts.js v.2 中应该支持此选项。但我在任何地方都找不到例子。

编辑：我没有提到我使用的是带有反应的图表，更具体地说，我正在使用这个反应包装器。

我正在导入例如图表线 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.js 2.x，我使用这种方法。只需在选项中添加：

onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

希望能帮助到你。