Question

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

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

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

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

我想知道是否有更好的方法可以达到上述要求。谢谢

Answer 1

您可以使用getElementsAtEvent属性。这仅在单击图表区域时才有值，如果在图例上单击则该元素为null。如果在图表区域上单击它，则它将拥有属性，我们可以从中获取单击的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块。

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

1 个答案: