ChartJS 区分图表区域、数据集和图例之间的点击答案

【问题标题】：ChartJS distinguish clicks between chart area, dataset and legendChartJS 区分图表区域、数据集和图例之间的点击
【发布时间】：2018-11-26 12:25:09
【问题描述】：

我有一个通过“npm react-chartjs-2”使用 ChartJS 的反应应用程序。我正在使用Line 图表，我有以下要求：

1- 检测点击图表区域（白色区域；数据集线和图例除外），然后执行一些逻辑

2- 检测单击顶部的图例矩形以隐藏/显示数据集（当前默认行为）

我尝试过使用options.onClick，但它似乎覆盖了图例点击。还尝试了getElementAtEvent 它返回单击的数据集，但单击图例/图表区域时显示为空。 getDatasetAtEvent 总是返回空数组。如果我使用options.legend.onClick，我会失去默认的隐藏/显示行为，需要以编程方式进行。

我想知道是否有更好的方法来实现上述要求。谢谢

【问题讨论】：

标签： reactjs chart.js

【解决方案1】：

您可以使用 getElementsAtEvent 属性。这仅在单击图表区域时给出值，如果在图例上单击元素，则该元素为空。如果在图表区域上单击它，则它包含属性，我们可以从中获取单击的 xAxis 和图例值。

document.getElementById("yourChartCanvasId").addEventListener("click", function (e) {
    var element = instance.getElementsAtEvent(e)[0];

    if (element) {    
      //Handle click on chart area        
    }
    else {    
      //Handle click on legend area        
    }        
});

此外，如果您不想在图例单击时执行任何操作，请保持默认的 Chart.js 行为，然后不要包含 else 块。

【讨论】：

对不起，这不起作用..单击空白或图例 element 将是未定义的..element 仅在单击数据点时有效。