您如何配置 ChartJS 2.0 版,以便在单击雷达图上的某个点时提供与该点关联的数据,即标签、数据值、数据集名称。我继续阅读 https://github.com/nnnick/Chart.js/releases该版本 2.0 提供:
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
有人可以告诉我我需要做什么吗?我已阅读文档并尝试附加到不同对象支持的各种单击和 onClick 事件,但无法弄清楚如何获取相关数据。
我正在使用的示例代码(简化)是:
<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>
提前谢谢了。
最佳答案
您应该可以使用 getElementsAtEvent
方法,像这样
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/
关于chart.js - ChartJs 2.0 如何获取被点击的点信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32582122/