如何使用Chartjs 2.X版設置自定義工具提示事件

Question

嗨，我試圖用Chart.js線圖將點擊事件附加到數據點上。

但是，正式文件沒有此類信息。 我找到了一些在工具提示上進行自定義事件的源，但它們看起來像使用1.X版。（ 在chartjs上添加自定義事件 ）-在2.x版中，無法訪問Chart.defaults

因此，我要做的是如下所示。

• 我將在Chart.js線圖的數據點上添加click事件
• hover事件將保留。

僅供參考，我要編寫的代碼在這里。

function makeGraphSuitableData(items, type){
    var object = {
        labels : []
        , data : []
    }
    if(type == 'month') {
        object.labels = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
        object.data = new Array(12);
        for(var i = 0; i < object.labels.length; i++) {
            var datas = items.filter(function(item){
                return (item.reg_month == object.labels[i]);
            })
            console.log('datas', datas);

            if(datas && datas.length > 0){
                var single = datas[0];
                object.data[(object.labels[i] * 1) - 1] = single.frequency;
            } else {
                object.data[(object.labels[i] * 1) - 1] = 0;
            }
        }
        object.labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    }
    return object;
}

function drawGraph(holder, statistics){

    var statistics = [
        {
            labels : "01"
            , frequency : "100"
        }, {
            labels : "02"
            , frequency : "150"
        }
    ]

    var canvas = holder.querySelector('canvas');
    if(!canvas){
        var canvas = document.createElement('canvas');
        canvas.width = 400; canvas.height = 150;
        holder.appendChild(canvas);
    }

    var graphObject = makeGraphSuitableData(statistics, 'month');

    // Bar-Graph
    var type = 'line';   //bar, line
    var displayLabel = 'Expose counts';

    switch (type){
        case 'line':
            var myChart = new Chart(canvas, {
                type: type,
                data: {
                    labels: graphObject.labels,
                    datasets: [{
                        label: displayLabel,
                        data: graphObject.data,
                        fill: false,
                        lineTension: 0,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(75,192,192,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(75,192,192,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        spanGaps: false
                    }]
                }
            });


            canvas.addEventListener('click', function(e){
                var x = myChart;
                window.x = x;
            }, false);
            break;
    }
}

感謝您的閱讀和您的回答。 在版本2.X中， getPointsAtEvent看起來消失了。

======更新24MAR ======

為了闡明我的觀點，我更新了帖子。 在我看來，為了在數據點上添加單擊事件，需要獲取數據點對象。

但是我看不到如何訪問這些點。 我已經檢查了Chart對象，但是找不到getDataPoints()或getTooltips() 。 我想，訪問那些對象應該是一個解決方案。

小提琴

Answer 1

按照api進行此操作的正確方法（已證明）是使用.getElementAtEvent()原型方法。

另一種答案是有效的，但是如果您的圖表具有多個數據集（例如，線），則該方法無效。 此外，它依賴於chart.js對象中未記錄的對象/屬性，隨着新版本的發布，該對象/屬性可能隨時更改。

document.getElementById("canvas").onclick = function(evt){
  var activePoint = myChart.getElementAtEvent(event);

  // make sure click was on an actual point
  if (activePoint.length > 0) {
    var clickedDatasetIndex = activePoint[0]._datasetIndex;
    var clickedElementindex = activePoint[0]._index;
    var label = myChart.data.labels[clickedElementindex];
    var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementindex];     
    alert("Clicked: " + label + " - " + value);
  }
};

這是一個演示上述代碼的codepen示例 。

Answer 2

總有解決任何問題的方法。 花了大約半個小時，但我發現了。

在您的jsfiddle中，只需在下面進行更改：

canvas.addEventListener('click', function(e){
                var x = myChart;
}, false);
break;

至

canvas.addEventListener('click', function(e){
                var x = myChart;
                if(x.active[0]){
                    var value= x.tooltip._data.datasets["0"].data[x.active["0"]._index];
                    var label = x.tooltip._data.labels[x.active["0"]._index];
                    console.log(value + " at "+ label);
                }

}, false);
break;

您將可以通過label和value訪問該點。 請享用 ：）