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

2022-01-22 00:00:00 javascript chart.js

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

I am using chart.js v.2. library and I am trying to change the cursor style to 'pointer' when the user is hovering over points of chart. (I am going to use this with bar, pie, line charts). It seems that there should be support for this option in charts.js v.2. but I can't find an example anywhere.

我没有提到我正在使用带有 react 的图表，更具体地说，我正在使用这个 react 包装器.

I did not mention that I was using chart with react, to be more specific I am using this react wrapper.

我正在导入例如图表线 import { Line } from 'react-chartjs-2';

I am importing e.g. chart Line 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} />
    )
  }
};

推荐答案

对于 Chart.js 2.x，我使用这种方法.只需在选项中添加:

With Chart.js 2.x I use this approach. Just add this in the options:

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

希望对你有帮助.

相关文章