Интерактивный график через ChartJS

Question

Я пытаюсь сделать свой график интерактивным, чтобы я мог щелкнуть по столбцам, а затем сделать какое-то действие. В настоящее время я просто пытаюсь заставить его взаимодействовать должным образом, поэтому я просто пытаюсь получить его до console.log() переменной activePoints. Но есть проблема, в следующей строке:

var activePoints = barChart.getSegmentsAtEvent(evt);

Я получаю следующее сообщение об ошибке в моей консоли:

Uncaught TypeError: barChart.getSegmentsAtEvent is not a function

Btw Я удалил barChartOption часть кода, чтобы сделать его легче читать.

function graph(id) { 
       var barChartCanvas = $("#" + id).get(0).getContext("2d"); 
       var barChart = new Chart(barChartCanvas); 
       var barChartData = getAreaChartData(); 
       barChartData.datasets[0].fillColor = "#2E2EFE"; 
       barChartData.datasets[0].strokeColor = "#2E2EFE"; 
       barChartData.datasets[0].pointColor = "#2E2EFE"; 
       var barChartOptions = { 
       }; 

       barChartOptions.datasetFill = false; 
       barChart.Bar(barChartData, barChartOptions); 

       $("#"+id).click( 
        function(evt){ 
         var activePoints = barChart.getSegmentsAtEvent(evt); 
         console.log("activePoints= ", activePoints); 
        } 
       ); 
      } 
     }); 

Я пробовал исправить ошибку, но не смог найти решение этой проблемы. Есть ли кто-нибудь, кто может объяснить мне, что я сделал неправильно?

Answer 1

1. метод следует использовать для гистограммы getBarsAtEvent (getSegmentsAtEvent для пирога/пончика и полярных диаграмм)

2. getBarsAtEvent является метод на объекте гистограмм, т.е. один, возвращаемой .Bar звонок.

---

Так что вам нужно 2 незначительные изменения, как показано ниже

... 
var actualBarChart = barChart.Bar(barChartData, barChartOptions); 
... 
... 
    var activePoints = actualBarChart.getBarsAtEvent(evt); 
... 

Answer 2

У меня эквивалентную задачу, но с charts.js V2: даже думал, что код работал большой на V1.1 , не является совершенно бесполезным.

Это код, который я использую, чтобы вызвать взаимодействие между легендой и графиком:

helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){ 
     helpers.addEvent(legendNode, 'mouseover', function(){ 
      var activeSegment = moduleDoughnut.segments[index]; 
      activeSegment.save(); 
      activeSegment.fillColor = activeSegment.highlightColor; 
      moduleDoughnut.showTooltip([activeSegment]); 
      activeSegment.restore(); 
     }); 
    }); 

Как вы можете видеть, у меня был «событие» курсора, находящейся прикрепленное к каждому элементу легенды. Поэтому, когда элемент был завис, соответствующая часть диаграммы была подсвечена.

Теперь я пытаюсь работать с V2, но я просто не могу найти способ вызвать события на диаграмме.

Любые идеи?

---

Обновление:

Эверт Timberg в хранилище GIT дал мне это удивительное и элегантное решение, которое я усиливаюсь добавлением события MouseOut:

Chart.helpers.each(document.getElementById('legendContainer').firstChild.childNodes, function(legendNode, index) { 
 
Chart.helpers.addEvent(legendNode, 'mouseover', function() { 
 
    var activeSegment = window.myDoughnut.data.datasets[0].metaData[index]; 
 
    window.myDoughnut.tooltip.initialize(); 
 
    window.myDoughnut.tooltip._active = [activeSegment]; 
 
    window.myDoughnut.tooltip.update(true); 
 
    window.myDoughnut.render(window.myDoughnut.options.hover.animationDuration, true); 
 
}); 
 
Chart.helpers.addEvent(legendNode, 'mouseout', function() { 
 
    window.myDoughnut.tooltip._active = []; 
 
    window.myDoughnut.tooltip.update(true); 
 
}); 
 
});

Это код запуска события для элементов легенды.