如何在 Chart.js 中对切片单击甜甜圈设置操作

Question

我一直在尝试将 chart.js 添加到我的 Django 项目中，到目前为止效果很好。我用两片做了一个甜甜圈图。现在我想让这些切片中的每一个在点击时都有单独的动作，例如重定向到新的一面。

这些是我的图表设置：

var config = {
       type: 'doughnut',
       data: {
         datasets: [{
           data: {{ data|safe }}, // Error because django and js are being mixed
           backgroundColor: [
           '#ff0000', '#008000'
           ],
           label: 'Population'
         }],
         labels: {{ labels|safe }}
       },
       options: {
         responsive: true
       }
     };

这是渲染和我在点击时执行操作的功能：

       window.onload = function() {
       var ctx = document.getElementById('pie-chart').getContext('2d');
       var myPieChart = new Chart(ctx, config);

       $('#myChart').on('click', function(event) {
          var activePoints = myPieChart.getElementsAtEvent(event)

          if(activePoints[0]){
            console.log("Helo 1")
          }
          
          else {
            console.log("helo 2")
          }
       })

     };

我在其他页面上看到了我的解决方案，但它根本不起作用。我错过了什么吗？如果是，你能帮忙吗？

Answer 1

getElementAtEvent 已在 Chart.js v3 中替换为 chart.getElementsAtEventForMode（请参阅 3.x Migration Guide）。

请看下面的可运行代码，看看它现在是如何工作的：

const pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  },
  options: {
    onClick: evt => {
      var elements = pieChart.getElementsAtEventForMode(evt, 'index', { intersect: true }, false);
      var index = elements[0].index;
      console.log(pieChart.data.labels[index] + ': ' + pieChart.data.datasets[0].data[index]);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart"></canvas>