如何在 Chart.js 中获取点击事件答案

【问题标题】：How to get click event in Chart.js如何在 Chart.js 中获取点击事件
【发布时间】：2017-08-04 05:29:38
【问题描述】：

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

例子：

我有条形图
一种。（标签名称：Apple、Strawberry、Banana、Mango、Grape、Oragne）
我点击了几个标签的特定标签
一种。（点击：苹果，苹果总量：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 */
    });
});

【问题讨论】：

标签： jquery asp.net chart.js

【解决方案1】：

以下代码用于条形图按标签顺序添加数据键在我的情况下是 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);
                }

对于饼图检查这个 sn-p

<html>

<head>
  <title>PieChart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

  <script>
    var data = {
      datasets: [{
        data: [300, 50, 100, 200],
        backgroundColor: [
          "#a02020",
          "#ed1c24",
          "#ff9900",
          "#109618",
        ]
      }],
      labels: [
        "Critical",
        "High",
        "Medium",
        "Low"
      ]
    };

    $(document).ready(
      function() {
        var canvas = document.getElementById("myChart");
        var ctx = canvas.getContext("2d");
        var myNewChart = new Chart(ctx, {
          type: 'pie',
          data: data
        });

        canvas.onclick = function(evt) {
          var activePoints = myNewChart.getElementsAtEvent(evt);
          var chartData = activePoints[0]['_chart'].config.data;
          var idx = activePoints[0]['_index'];

          var label = chartData.labels[idx];
          var value = chartData.datasets[0].data[idx];

          var url = "http://example.com/?label=" + label + "&value=" + value;
          console.log(url);
          alert(url);
        };
      }
    );
  </script>

</head>

<body>
  <div style="width: 320.750px; height: 156px">
    <canvas id="myChart"></canvas>
  </div>
</body>

</html>

【讨论】：

哇！谢谢您的回答。你告诉我我想做什么。您的回答对我帮助很大。
hii Aamir 你能帮帮我吗？

【解决方案2】：

docs不是很清楚，但是新的处理方式是这样的：

var myChart = new Chart(ctx, {

    ...

    options: {
        onClick: (evt, item) => {
            let index = item[0]["_index"];
            let fruit = item[0]["_chart"].data.labels[index];
            let votes = item[0]["_chart"].data.datasets[0].data[index];
        }
    }
});

【讨论】：