如何更改悬停 Chartjs 上的图例图标

Question

我正在尝试自定义 chartjs 图例，以便当您将鼠标悬停在图例项上时，icon/point 样式会发生变化。请参见屏幕截图 Screenshot。这可能吗？

我正在尝试使用 onHover 属性进行不同的操作，但没有成功。

 legend: {
            display: true,
            onHover: function (event, legendItem, legend) {
            //Change Point style to icon
            },
            onLeave: function (e) {
            //Change back to normal
            }
        },

Answer 1

是的，这是可能的，您可以更新悬停的给定数据集的 pointStyle，您可以传递 chart.js 的任何预定义 pointStyles 或文档中描述的图像（https://www.chartjs.org/docs/master/configuration/elements.html#point-styles)

示例：

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true
        },
        onHover: (evt, item, legend) => {
          legend.chart.data.datasets[item.datasetIndex].pointStyle = 'rectRot'
          legend.chart.update();
        },
        onLeave: (evt, item, legend) => {
          legend.chart.data.datasets[item.datasetIndex].pointStyle = ''
          legend.chart.update();
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>

如何更改悬停 Chartjs 上的图例图标

How to change legend icon on hover Chartjs

javascript

legend

onhover

chart.js