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 版提供:

<块引用>

新的事件挂钩，如 onHover 和 onClick 为您完成了艰苦的工作.他们甚至无需通过事件定位即可将好东西传递给您

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

我使用的示例代码(简化)是:

<脚本类型="文本/javascript">变量配置 = {类型:雷达"，数据: {标签:["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","最长运行时间 (s)","每次调用的平均 IOPS","平均经过时间 (ms)","每个 Sproc 的平均执行次数","每个 sproc 的平均 IOPS"],数据集:[{标签: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)",数据:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]},{标签: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)",数据:[41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.}]}};$(函数(){var myRadar = new Chart(document.getElementById("myChart"), config);//如何附加到 onclick 事件，它为我提供在 chartjs 2.0 中单击的点信息?});</脚本><div 类="雷达图"><canvas id="myChart" width="700" height="700"></canvas></div>
非常感谢.
解决方案
你应该可以像这样使用 getElementsAtEvent 方法
document.getElementById("myChart").onclick = function(evt){var activePoints = myRadar.getElementsAtEvent(evt);//使用 activePoints 数组中每个元素的 _datasetIndex 和 _index};
<小时>
小提琴 - http://jsfiddle.net/uwaszvk7/
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: 

  
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
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>


Many thanks in advance.
解决方案
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
};




Fiddle - http://jsfiddle.net/uwaszvk7/

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