Chart.js - 懸停後回調

Question

我需要在將圖的一部分懸停後進行回調（donught）。我怎樣才能做到這一點？從理論上講，chart.js之不提供回調，所以這是一個問題:)

我當前的代碼：

var visitorsChart = [ 
      { 
       value: 60, 
       color:'#3e89dc' 
      }, 
      { 
       value: 40, 
       color:'#88c600' 
      } 
     ] 

     var visitorsChartOptions = { 
      percentageInnerCutout: 70 
     } 

     var renderVisitorsChart = new Chart(document.getElementById("visitors-chart").getContext("2d"), {tooltips: {position: 'bottom left', background: 'rgba(255,255,255,0)', fontFamily: 'Open Sans', fontSize: '40px', fontWeight: '700', labelTemplate:'<%=value%>'}, border: {width:0}, showShadow: false}).Doughnut(visitorsChart, visitorsChartOptions); 

Answer 1

Charts.JS確實有一種方式來獲得有關基於事件的圖表信息發生在畫布上。

http://www.chartjs.org/docs/#doughnut-pie-chart-prototype-methods

從文檔：

在圖表實例調用getSegmentsAtEvent（事件）傳遞的事件，或jQuery的事件的說法，將返回段元素都在，同樣的位置事件。

canvas.onclick = function(evt){ 
    var activePoints = myDoughnutChart.getSegmentsAtEvent(evt); 
    // => activePoints is an array of segments on the canvas that are at the same position as the click event. 
}; 

此功能可實現基於DOM提示，或在您的應用程序觸發的定製行爲非常有用。

編寫懸停函數的回調函數可能很簡單，該函數可以訪問圖表中可能需要的信息。

$("#visitors-chart").mouseover(function (evt) { 
    var info = renderVisitorsChart.getSegmentsAtEvent(evt.originalEvent); 
    console.log(info); 
});