chart.js 圓環圖，如果點擊則帶有鏈接

Question

如果圓環圖切片上的 onclick 事件發生，我會嘗試建立鏈接。 我的數據源是 3 個數組，帶有標簽、值和 url 的 id。

HTML：

<canvas id="pie-chart" style='display: none;'></canvas>

<!-- Php Arrays to JS -> PIE-CHARTDATA -->

<script type="text/javascript"> 

var chartIds = [[12,14,17,18]];

var chartValues = [[208.09,296.86,634.975,972.808]];

var chartLabels = [["BTC","AAPL","MSFT","ETH"]];

</script>

JS：

if (chartValues.length != 0 ) {
    document.getElementById("pie-chart").style.display= "block";
}
Chart.register(ChartDataLabels);

var chartValuesInt = [];
length = chartValues[0].length;
for (var i = 0; i < length; i++)
chartValuesInt.push(parseInt(chartValues[0][i]));

var data = [{
    data: chartValuesInt,
        chartIds,
    backgroundColor: [  
        "#f38000",
        "#5f44f5",
        "#333333",

    ],
    borderColor: "#000"
}];

var options = {
    borderWidth: 4,
    hoverOffset: 6,
    plugins: {
        legend: {
            display: false
        },
        tooltip: {
            enabled: false,
            
        },
        datalabels: {
            formatter: (value, ctx) => {
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;

                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";

                return [ctx.chart.data.labels[ctx.dataIndex],
                percentage,   
                '$' + value ] ;
            },
            textAlign: 'center',
            color: '#fff',
            borderRadius: 50,
            padding:10,
            labels: {
                title: {
                    font: {
                        weight: 'bold',
                        size: '16px'
                    }
                },
            }  
        }
    },
    options:{
        onClick: (e, activeEls) => {
            let datasetIndex = activeEls[0].datasetIndex;
            let dataIndex = activeEls[0].index;
            let datasetLabel = e.chart.data.datasets[datasetIndex].label;
            let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
            console.log("In click", datasetLabel,  value);
            //link to url with:[chartIds]
          }
    }
};

//IMAGE CENTER
const image = new Image();
image.src = 'img/pie-home2.png';

const plugin = {
  id: 'custom_canvas_background_image',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: chartLabels[0],
        datasets: data,
        chartIds
    },
    options: options,
    plugins: [plugin],
});

為什么 onclick 不起作用？

如何從事件發生的切片中獲取具有正確索引的 id？

我已經搜索過，但找不到這兩個問題的答案。

Answer 1

您的onClick功能不起作用，因為您在選項對象中定義了一個選項對象並將onClick放在那里。 這是不支持的。 當您刪除內部選項層時，它將起作用：

const options = {
  borderWidth: 4,
  hoverOffset: 6,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false,

    },
    datalabels: {
      formatter: (value, ctx) => {
        let sum = 0;
        let dataArr = ctx.chart.data.datasets[0].data;

        dataArr.map(data => {
          sum += data;
        });
        let percentage = (value * 100 / sum).toFixed(2) + "%";

        return [ctx.chart.data.labels[ctx.dataIndex],
          percentage,
          '$' + value
        ];
      },
      textAlign: 'center',
      color: '#fff',
      borderRadius: 50,
      padding: 10,
      labels: {
        title: {
          font: {
            weight: 'bold',
            size: '16px'
          }
        },
      }
    }
  },
  onClick: (e, activeEls) => {
    let datasetIndex = activeEls[0].datasetIndex;
    let dataIndex = activeEls[0].index;
    let datasetLabel = e.chart.data.datasets[datasetIndex].label;
    let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
    console.log("In click", datasetLabel, value);
    //link to url with:[chartIds]
  }
};