将鼠标悬停在图表点上时如何将光标样式更改为指针？ [英] How to change cursor style to pointer on hovering over points of the chart?

问题描述

我正在使用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-chartjs-2'图表线 import {线};

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:

events: ['mousemove'], // this is needed, otherwise onHover is not fired
onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

希望它会有所帮助。

这篇关于将鼠标悬停在图表点上时如何将光标样式更改为指针？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！