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

我正在使用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} /> 
    ) 
    } 
};

来源

2016-12-07 Merima Karić

我只是做了它的条形图，但我相信，解决方案可能为你工作了。有一个名为“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;" 
    } 
};

来源

2017-01-27 22:55:40

我已经改变了光标的风格在画布上悬停的CSS ，但这不是我想要的。我希望光标在POINTS上更改样式（例如，使用折线图显示工具提示的位置）...无论如何......感谢 –

这正是上述代码所发生的情况。我刚刚在一个折线图中进行了测试，光标转向指向点并返回箭头。你试过这个吗？ –

请检查更新的问题，并让我知道我的情况是否以及如何使用您的解决方案。谢谢！ –

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

回答

相关问题