ChartJS 如何改变光标的风格指针悬停在点的图表?

pftdvrlh  于 2023-01-30  发布在  Chart.js
关注(0)|答案(3)|浏览(187)

我正在使用chart.js v.2. library,当用户将鼠标悬停在图表的点上时,我试图将光标样式更改为“指针”。(我将在条形图、饼图、折线图中使用此选项)。看起来charts.js v.2中应该支持此选项。但我在任何地方都找不到示例。
编辑:我没有提到我使用的是带有React的Chart,更具体地说,我使用的是这个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} />
    )
  }
};
new9mtju

new9mtju1#

在Chart.js 2.x中,我使用了这种方法,只需在选项中添加以下内容:

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

希望有帮助。

vof42yt1

vof42yt12#

我只是为一个条形图做了这个,但我相信这个解决方案对你也适用。有一个叫做“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;"
    }
};
azpvetkf

azpvetkf3#

在chart.js v2.9.4中,为了确保悬停效果仅在实际悬停在数据点上时才存在,我在options中执行了以下操作:

hover: {
    mode: "nearest",
    onHover: function (e, el) {
        let points = userPricingChart.getElementAtEvent(e);
        if (points.length > 0) {
            e.target.style.cursor = "pointer";
        } else {
            e.target.style.cursor = "default";
        }
    }
}

希望这个有用。

相关问题