如何更改 React chartjs-2 图例单击功能以隐藏除单击的以外的所有内容？

Question

React Chartjs-2：如何在单击图例时实现功能，而不是隐藏单击的图例，所有其他 legends/datasets 都隐藏？

Answer 1

通过修改图例的onClick函数：

选项：

options: {
    plugins: {
        legend: {
            onClick: newLegendClickHandler
        }
    }
}

单击时：

var newLegendClickHandler = function (e, legendItem, legend) {    
    let datasetIndex = legendItem.datasetIndex;
    let ci = legend.chart, metaSets = [];
    
    for (let i = 0; i < legend.chart.data.datasets.length; i++) {
        metaSets.push(ci.getDatasetMeta(i));
    }
    
    metaSets.forEach(function(meta) {
        meta.hidden = meta.index === datasetIndex ? false : true;
    });
    ci.update();
    
};

有关此主题的更多信息：Legend

A fiddle 看看效果：JSFiddle

编辑：

Chartjs 2 使用几乎相同的方法。

选项：

options: {
    legend: {
        onClick: newLegendClickHandler
    }
}

单击时：

var newLegendClickHandler = function (e, legendItem) {    
    let datasetIndex = legendItem.datasetIndex;
    let ci = this.chart, metaSets = [];
    
    for (let i = 0; i < ci.data.datasets.length; i++) {
        metaSets.push(ci.getDatasetMeta(i));
    }
    
    metaSets.forEach(function(meta) {
        meta.hidden = meta.index === datasetIndex ? false : true;
    });
    ci.update();
};

另一个Fiddle：2.9.4 Fiddle

编辑 2：

如果您使用的是 chartjs 2.6.0，则需要将 meta.index 更改为 meta.controller.index