Chart.js устанавливает действие на срез-щелчок dougnut

Я пытался добавить 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")
          }
       })

     };

Я видел свое решение на других страницах, но оно совсем не работает. Я что-то упустил? Если да, не могли бы вы помочь?

Большое спасибо.

getElementAtEvent был заменен на chart.getElementsAtEventForMode в Chart.js v3 (см. 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>

Вернуться на верх