如何在Chart.js中获取click事件

我使用Chart.js绘制条形图和饼图.我希望​​在单击特定标题栏时显示弹出窗口.

例:

我有条形图
a.(标签名称:Apple,Strawberry,Banana,Mango,Grape,Oragne)

我点击了几个标签
的特定标签a.(点击:Apple,Apple总量:7ea)

然后会出现一个弹出窗口,该窗口使用传递给参数URL的值,显示有关内部苹果的更多信息.一个.(韩国苹果:1ea,美国苹果:3ea,中国苹果:2ea,日本苹果:1ea)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Apple", "Strawberry", "Banana", "Mango", "Grape", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [7, 8, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

$(document).ready(function () {
    $("#myChart").click(
    function (e) {
          /* need programing code */
    });
});

小智.. 8

下面的代码用于条形图在标签的顺序中添加数据键在我的情况下,在你的情况下它是theChart它是myChart

datakeys: ["4", "3", "2", "1", "6"],

 document.getElementById("chart_VulSev").Onclick= function (evt) {
                    var activePoints = theChart.getElementAtEvent(evt);
                    var theElement = theChart.config.data.datasets[activePoints[0]._datasetIndex].data[activePoints[0]._index];
                    //console.log(activePoints);
                    //console.log(theElement);
                    //console.log(theChart.config.data.datakeys[activePoints[0]._index]);
                    window.open("page.aspx?id=" + theChart.config.data.datakeys[activePoints[0]._index]);
                    //alert(theChart.config.data.datakeys[activePoints[0]._index]);
                    //console.log(theChart.config.type);
                }

对于饼图,请检查此代码段

 document.getElementById("chart_VulSev").Onclick= function (evt) {
                    var activePoints = theChart.getElementAtEvent(evt);
                    var theElement = theChart.config.data.datasets[activePoints[0]._datasetIndex].data[activePoints[0]._index];
                    //console.log(activePoints);
                    //console.log(theElement);
                    //console.log(theChart.config.data.datakeys[activePoints[0]._index]);
                    window.open("page.aspx?id=" + theChart.config.data.datakeys[activePoints[0]._index]);
                    //alert(theChart.config.data.datakeys[activePoints[0]._index]);
                    //console.log(theChart.config.type);
                }