ChartJs 2.0如何获取点击的点信息？

Question

如何在点击雷达图表上的点时配置ChartJS 2.0版,提供与该点相关的数据,即标签,数据值,数据集名称.我在https://github.com/nnnick/Chart.js/releases上阅读了2.0版提供的内容:

像onHover和onClick这样的新事件挂钩为您完成了艰苦的工作.他们通过你的好东西,甚至没有通过事件定位

有人可以告诉我我需要做什么我已阅读文档并尝试附加到各种click和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>

提前谢谢了.

Answer 1

您应该能够使用该getElementsAtEvent方法,如此

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/

Answer 2

我有一个包含多个数据集的图表。使用建议的getElementsAtEvent(evt)函数，返回给定 x 位置的所有数据集，但不仅是我单击的单个数据集索引。因此，无法识别单个数据集。

要仅单击单个点：

const activePoint = chartObj.getElementAtEvent(event);
const datasetIndex = activePoint[0]._datasetIndex;
const itemIndex = activePoint[0]._index;

请注意getElementAtEvent()与getElementsAtEvent().

Answer 3

在 ChartJS 2.0 中实现此目的的另一种方法是使用雷达图的 lastActive 属性。

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

Answer 4

另外，您可以用来var activePoints = chartObj.getElementsAtXAxis(evt);仅基于x轴获取最近的活动元素。（对于您的值非常小的超级有用）