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

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.js 2.x，我使用这种方法。只需在选项中添加:

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

希望对您有所帮助。