如何使用 Chart.js 將點擊事件添加到我的折線圖

Question

我正在嘗試使用Chart.js將點擊事件添加到我的折線圖。 我已經啟用了我的工具提示來顯示我的折線圖中的信息，但我還想添加一個點擊方法，讓我知道用戶在 x 軸上點擊的位置。 現在我只想彈出一個警報，給我用戶點擊的 x 軸上的值。

研究：

我查看了 Chart.js的文檔，發現了這個方法：.getPointsAtEvent(event)

在您的 Chart 實例上調用 getPointsAtEvent(event) 傳遞事件或 jQuery 事件的參數，將返回位於該事件相同位置的點元素。

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

我只是不知道如何使用或在我的代碼中放置該函數的位置。 如果有人能幫我找出可以將其添加到代碼中的位置，將不勝感激！

我的代碼：（在javascript中）

  //NOTE: the div 'roomForChart' has been already declared as <div id="roomForChart"></div>


 //creating html code inside of javascript to display the canvas used for the graph
 htmlForGraph = "<canvas id='myChart' width ='500' height='400'>";
 document.getElementById('roomForChart').innerHTML += htmlForGraph;

 //NOW TO CREATE DATA

   //the data for my line chart
    var data = {
         labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis
          datasets: [
            {   //my red line
                label: "Usage Plan",
                fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
                strokeColor: "rgba(224,0,0,1)",//creates the line
                pointColor: "rgba(244,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [1024, 1024, 1024, 1024, 1024]
           },

       {    //my green line
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: [15, 25, 45, 45, 1500]
       },
        {  //my blue line
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [15, 10, 20, 0, 5]
       }

     ] //ending the datasets
     }; //ending data


    //creating a variable for my chart
    var ctx = document.getElementById("myChart").getContext("2d");




//code to create a maximum y value on the chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    scaleOverride: true,
    scaleSteps: maxSteps,
    scaleStepWidth: Math.ceil(maxUsage / maxSteps),
    scaleStartValue: 0

});

 //what I have tried but it doesn't show an alert message
ctx.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

對於那些很難將圖表可視化的人，您可以：

希望我提供了足夠的信息來獲得一些幫助。 如果我需要解釋自己，請告訴我。 先感謝您！！！ :)

Answer 1

改變這一行

document.getElementById('roomForChart').innerHTML += htmlForGraph;

對此

holder = document.getElementById('roomForChart');
holder.innerHTML += htmlForGraph;

進一步你會有你的片段，修改了一下

holder.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

添加console.log(activePoints); 在onclick處理程序中查看activePoints變量的內容。 我可以看到，有三個對象。 例如，這些是activePoints[0]值

datasetLabel: "Usage Plan"
fillColor: "rgba(244,0,0,1)"
highlightFill: "#fff"
highlightStroke: "rgba(220,220,220,1)"
label: "Aug 4"
strokeColor: "#fff"
value: 1024
x: 371
y: 12.356097560975627

他們可以按如下方式訪問

activePoints[0].label
activePoints[0].x
activePoints[0].y
activePoints[0].value

最好先檢查屬性是否undefined ，因為每次點擊事件都沒有數據。

Answer 2

我無法使用onclick方法。

但我終於設法使用click方法運行它：

$("#canvas_id").click(function(e) {
   var activeBars = myBarChart.getBarsAtEvent(e); 
   console.log(activeBars[0]);
});

注意：此示例如果對於條形圖 - 其他圖表具有稍微不同的方法來檢索點（請參閱文檔）。

Answer 3

如果你使用新的ChartJs版本使用這個：

canvas.onclick = function(evt){
   var activePoints = myLineChart.getElementsAtEvent(evt);
};

Answer 4

迄今為止提供的答案接近正確的解決方案，但不完整。 您需要使用getElementsAtEvent（）來獲取正確的元素，但是這會為您提供在單擊的x-index處的元素集合。 即使您使用多個數據集，也可以是多個值，每個數據集一個。

要確定要從中提取的正確數據集，請調用getDatasetAtEvent（）方法。 這將返回包含單擊的數據集元素的元素列表。 從其中任何一個中選擇數據集ID，它們都是相同的Id。

將兩者放在一起，您需要調用所需的調用來計算所單擊元素中包含的數據。 在初始化數據集時傳遞的不僅僅是x和y值，這將使您可以使用此事件進行各種巧妙的操作。 （例如，觸發彈出窗口，其中包含有關該事件的更詳細信息）

可能有一種更簡潔的方式來獲取這些數據，但我沒有發現它在圖表文檔和票據上亂糟糟的。 也許他們會在將來的版本中添加它。

// chart_name is whatever your chart object is named. here I am using a
// jquery selector to attach the click event.
$('#' + chart_name).click(function (e)
{
    var activePoints = myChart.getElementsAtEvent(event);
    var activeDataSet = myChart.getDatasetAtEvent(event);

    if (activePoints.length > 0)
    {
         var clickedDatasetIndex = activeDataSet[0]._datasetIndex;
         var clickedElementIndex = activePoints[0]._index;
         var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    }
    // todo: add code to do something with value.
});

Answer 5

V3

您還可以使用內置onClick選項來獲取以下參數：（ (event, activeElements, chartInstance)

因此，您可以讀取作為第二個元素獲得的數組，以查看哪些元素已處於活動狀態。 默認情況下，此數組僅包含 1 個項目，但如果您更改交互模式，則此處可能包含多個項目。

 var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], backgroundColor: 'orange' } ] }, options: { onClick: (evt, activeElements, chart) => { console.log(`DatasetIndex: ${activeElements[0].datasetIndex} DataIndex: ${activeElements[0].index}`) } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>

在 v3 中， getElementsAtEvent已被刪除，現在您必須使用： chart.getElementsAtEventForMode(event, 'index', { intersect: true }, false)

如果你想使用getDatasetAtEvent你現在必須使用： chart.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)