如何更改chart.js版本3中數據標簽hover上的cursor？

Question

一旦鼠標懸停在數據 label 上，我一直試圖將鼠標 cursor 更改為“指針”。

在將鼠標懸停在數據點上時，我能夠有效地實現這種效果，所以這很好。

options: {
onHover: (eve, legendItems, chartElement) => {
      if (_.get(eve, 'native.target.style')) {
        eve.native.target.style.cursor = legendItems[0] ? 'pointer' : 'default';
      }
    }
}

我正在嘗試遵循 ChartDataLabels 插件的當前文檔： https://chartjs-plugin-datalabels.netlify.app/guide/events.html#example

listeners: {
          click: ({ datasetIndex, dataIndex }) => {
            setTileActive(report.id);
            populateDrills(report.id, reportGroup, report.data.dataset[datasetIndex].values[dataIndex]);
            executeScroll();
            return;
          },
          enter: async (context) => {
            context.hovered = true;
            const chartTileElem = document.getElementById(`${report.id}-chart`);
            console.log('<><><><', chartTileElem.style.cursor, context);

            // _.set(context, 'chart.canvas.style.cursor', 'pointer');

            _.set(chartTileElem, 'style.cursor', 'pointer');

            // context.chart.canvas.style.cursor = 'pointer';
            return;
          },
          leave: (context) => {
            context.hovered = false;

            // const chartTileElem = document.getElementById(`${report.id}-chart`);
            // chartTileElem.style.cursor = 'default';

            // context.chart.canvas.style.cursor = 'default';
            return;
          },
          color: (context) => {
            return context.hovered ? 'green' : null;
          }
        }

這確實會重新渲染圖表，但不會在需要時將 cursor 更改為指針。 我發現的一個奇怪行為是，當懸停的項目在該圖表中具有最高值時，它確實將 cursor 更改為某些條形圖中的指針。 同樣，這種情況很少發生。

因此，請建議任何可以改變數據 label 的 hover 上的 cursor 的固體解決方案。

EDIT-1：建議的類似問題： Chart.js how to show cursor pointer for labels & legends in line chart

與這個有很大不同。 當它談到標簽和圖例上的 onHover 行為時，在這個線程中，我試圖為在圖表數據點頂部呈現的數據標簽找到解決方案。

Answer 1

您可以從上下文中獲取 canvas 元素並將 cursor 設置為指針，如下所示：

 Chart.register(ChartDataLabels) const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'pink' }] }, options: { plugins: { datalabels: { listeners: { enter: (ctx) => { ctx.chart.canvas.style.cursor = 'pointer' }, leave: (ctx) => { ctx.chart.canvas.style.cursor = 'default' } } } } } } const 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.6.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script> </body>

如何更改chart.js版本3中數據標簽hover上的cursor？

問題描述

1 個解決方案

解決方案1
0 2021-11-21 16:44:34

如何更改chart.js版本3中數據標簽hover上的cursor？

問題描述

1 個解決方案

解決方案1 0 2021-11-21 16:44:34

解決方案1
0 2021-11-21 16:44:34