如何在Chart.js中对切片单击圆环图设置操作

4dc9hkyq  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(190)

我一直在尝试将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")
          }
       })

     };

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

oknwwptz

oknwwptz1#

在Chart.js v3中,getElementAtEvent已替换为chart.getElementsAtEventForMode(请参见3.x迁移指南)。
请看下面的可运行代码,看看它现在是如何工作的:
第一个

相关问题