如何更改懸停 Chartjs 上的圖例圖標

Question

我正在嘗試自定義 chartjs 圖例，以便當您將鼠標懸停在圖例項上時，圖標/點樣式會發生變化。 見截圖截圖。 這可能嗎？

我正在嘗試使用 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 上的圖例圖標

問題描述

1 個解決方案

解決方案1
0 已采納 2021-06-25 15:49:59

如何更改懸停 Chartjs 上的圖例圖標

問題描述

1 個解決方案

解決方案1 0 已采納 2021-06-25 15:49:59

解決方案1
0 已采納 2021-06-25 15:49:59