如何使用ChartJS进行图表钻取？

Question

我很惊讶地发现几乎没有关于这个话题的信息。

我有一个ChartJS饼状图，我想在单击饼图的一个切片后进行下钻。

你会怎样做呢？

谢谢

- AlonBA

---

我认为这个问题很重要，因为其他答案没有标记为“深入挖掘”，所以大多数人不会找到它。这个问题可以引导他们朝着正确的方向参考。此外，我将jsfiddle代码插入了答案，并对其进行了一些改进。 - AlonBA

我认为这是一个有效的问题，不应该被关闭，因为即使您捕获事件，也不能立即实现钻取功能。 我不得不销毁先前的图表，并在同一HTML元素上重新加载新数据。 - Muhammad Ashhar Hasan

为什么这个被关闭了？它绝对是相关话题。 - trpt4him

Answer 1

我使用这个精彩的答案解决了我的问题: 在Chart.js中为饼图添加点击事件 代码如下:

    $(document).ready(function() {
      var canvas = document.getElementById("myChart");
      var ctx = canvas.getContext("2d");
      var myNewChart = new Chart(ctx, {
         type: 'pie',
         data: data
      });

      canvas.onclick = function(evt) {
      var activePoints = myNewChart.getElementsAtEvent(evt);
      if (activePoints[0]) {
         var chartData = activePoints[0]['_chart'].config.data;
         var idx = activePoints[0]['_index'];

         var label = chartData.labels[idx];
         var value = chartData.datasets[0].data[idx];
         var color = chartData.datasets[0].backgroundColor[idx]; //Or any other data you wish to take from the clicked slice

         alert(label + ' ' + value + ' ' + color); //Or any other function you want to execute. I sent the data to the server, and used the response i got from the server to create a new chart in a Bootstrap modal.
       }
     };
  });

这个方案非常完美。不过，我会使用AJAX将信息发送到服务器，并在Bootstrap模态框中显示一个新的图表，而不是弹出警告信息。

- AlonBA

---

你可以在不使用模态框的情况下将其嵌入同一HTML中。只需在图表变量上调用.clear()和.destroy()方法，然后重新加载具有不同值的相同图表即可。 - Muhammad Ashhar Hasan