ChartJs 2.0如何获取被点击的点信息？ [英] ChartJs 2.0 How do I obtain point information being clicked upon?

问题描述

如何配置ChartJS 2.0版，以便在雷达图上单击某个点时提供与该点关联的数据，即标签，数据值，数据集名称。我在 https://github.com/nnnick/Chart.js/releases 上读到2.0版提供了以下功能：

How do you configure ChartJS version 2.0 to upon clicking on a point on a radar chart provide the data associated with that point i.e. label, data value, dataset name. I read on https://github.com/nnnick/Chart.js/releases that version 2.0 provides:

像onHover和onClick这样的新事件挂钩为您完成了艰苦的工作。他们甚至不需要通过事件就可以找到您的好东西。

New event hooks like onHover and onClick do the hard work for you. They pass you the good stuff without even having to locate via event

有人可以告诉我我需要做什么吗？我已经阅读了文档，并尝试附加到不同对象支持的各种click和onClick事件上，但无法弄清楚如何获取关联的数据。

Could someone please show me what I need to do I have read the documentation and tried attaching to the various click and onClick events which the different objects support but can not work out how to achieve getting the associated data.

示例代码（简化），其中我正在使用的是：

Sample code (simplified) which I am using is:

<pre>

    <script type="text/javascript">
      var config = {
      type: 'radar',
      data: {
      labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total  Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"],
     datasets:
    [
     {
      label: "DB1",
      fillColor: "rgba(212, 212, 106, 0.2)",
      strokeColor: "rgba(212, 212, 106, 1)",
      pointColor: "rgba(212, 212, 106, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(212, 212, 106, 1)",
      data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]
     },
     {
      label: "DB2",
      fillColor: "rgba(165, 198, 99, 0.2)",
      strokeColor: "rgba(165, 198, 99, 1)",
      pointColor: "rgba(165, 198, 99, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(165, 198, 99, 1)",
      data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214]
     }
     ]
     }
    };

     $(function () {
            var myRadar = new Chart(document.getElementById("myChart"), config);
         //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0?
        });

</script>

<div class="radarChart">
     <canvas id="myChart" width="700" height="700"></canvas>
</div>

非常感谢。 / p>

Many thanks in advance.

推荐答案

您应该可以使用 getElementsAtEvent 方法，就像这样

You should be able to use the getElementsAtEvent method, like so

document.getElementById("myChart").onclick = function(evt){
    var activePoints = myRadar.getElementsAtEvent(evt);
    // use _datasetIndex and _index from each element of the activePoints array
};

---

小提琴- http://jsfiddle.net/uwaszvk7/

这篇关于ChartJs 2.0如何获取被点击的点信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！