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

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

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

  1. class ChartTimelineChart extends Component {
  2. constructor(props){
  3. super(props);
  4. this.options = {
  5. responsive: true,
  6. maintainAspectRatio: false,
  7. animation: {
  8. easing: 'easeOutCirc',
  9. duration: 1000
  10. },
  11. pointStyle : 'circle',
  12. scales: {
  13. xAxes: [{
  14. display: true,
  15. gridLines: {display: false},
  16. scaleLabel: {display: true}
  17. }],
  18. yAxes: [{
  19. display: true,
  20. gridLines: {display: false},
  21. ticks: {beginAtZero:true},
  22. scaleLabel: {display: true}
  23. }]
  24. },
  25. tooltips: {
  26. displayColors: false
  27. },
  28. legend: false
  29. };
  30. searchChart(elem, props, data) {
  31. //Something...
  32. }
  33. render(){
  34. return (
  35. (this.props.selectedYears.length)
  36. ? ( <div>
  37. <Line data={this.props.selectedYearsData}
  38. redraw={true}
  39. options={this.options}
  40. getElementAtEvent={elem => this.searchChart(elem, this.props, this.props.selectedYearsData)} />
  41. </div>)
  42. : <Line data={{datasets: [], labels: []}}
  43. redraw={true}
  44. options={this.options} />
  45. )
  46. }
  47. };
new9mtju

new9mtju1#

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

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

希望有帮助。

vof42yt1

vof42yt12#

我只是为一个条形图做了这个,但我相信这个解决方案对你也适用。有一个叫做“chart-hover”的属性,你可以在其中设置一个回调。它在你每次进入和离开条形图时被触发。
这是我的“画布”的样子:

  1. <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">
  2. </canvas>

这是 onHover 在我的控制器上的显示:

  1. $scope.onHover = function (points, evt) {
  2. if (points.length === 0) {
  3. evt.toElement.attributes.style.nodeValue = evt.toElement.attributes.style.nodeValue.replace("cursor: pointer;", "")
  4. return;
  5. }
  6. var res = evt.toElement.attributes.style.nodeValue.match(/cursor: pointer;/);
  7. if (res == null) {
  8. evt.toElement.attributes.style.nodeValue += "cursor: pointer;"
  9. }
  10. };
展开查看全部
azpvetkf

azpvetkf3#

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

  1. hover: {
  2. mode: "nearest",
  3. onHover: function (e, el) {
  4. let points = userPricingChart.getElementAtEvent(e);
  5. if (points.length > 0) {
  6. e.target.style.cursor = "pointer";
  7. } else {
  8. e.target.style.cursor = "default";
  9. }
  10. }
  11. }

希望这个有用。

相关问题