chart.js - Chart.js 在多个图表上同步图例切换

Question

有一些解决方案可以使用图例 onClick 来打开/关闭单击图表上（所有其他）数据集的可见性，但如果它们具有相同的标签/图例，我需要一种方法来在多个图表上同步此切换。例如，我有 6 个图表，显示相同数据的不同信息。但是，并非所有图表都包含所有数据集。一个可能有 5 个数据集，另一个有 3 个，依此类推。而且它们也可能不会以相同的顺序出现。

目标是能够单击一个图表上的图例项，并在所有图表上切换相同的项。

由于我没有找到现有的解决方案，所以我发布了这个。

标签： chart.js

Answer 1

为此，我将所有图表放在一个全局变量中并循环遍历它们以匹配数据集，legendItem.text而不是legendItem.datasetindex，因为标签可能存在也可能不存在，甚至位于其他图表上的相同索引位置。

以下是我创建/替换多个图表的方法：https ://stackoverflow.com/a/51882403/1181367

这是图例 onClick切换解决方案：

var config = {
    type: type,
    data: {
        labels: labels,
        datasets: datasets
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }]
        },
        legend: {
            position: 'right',
            onClick: function (e, legendItem) {
                var text = legendItem.text;
                Object.keys(charts).forEach(function (id) {
                    // loop through the charts
                    var ci = charts[id].chart
                    var cindex = (function () {
                        var match = null;
                        ci.legend.legendItems.forEach(function (item) {
                            if (item.text == text) {
                                // get index for legend.text that matches clicked legend.text 
                                match = item.datasetIndex;
                            }
                        });
                        return match;
                    })();
                    if (cindex !== null) {
                        // if there's a match
                        var alreadyHidden = (ci.getDatasetMeta(cindex).hidden === null) ? false : ci.getDatasetMeta(cindex).hidden;
                        ci.data.datasets.forEach(function (e, i) {
                            var meta = ci.getDatasetMeta(i);
                            if (i !== cindex) {
                                if (!alreadyHidden) {
                                    meta.hidden = meta.hidden === null ? !meta.hidden : null;
                                } else if (meta.hidden === null) {
                                    meta.hidden = true;
                                }
                            } else if (i === cindex) {
                                meta.hidden = null;
                            }
                        });
                        ci.update();
                    }
                });
            }
        }
    }
};