Chart.js同步图例在多个图表上切换 [英] Chart.js sync legend toggle on multiple charts

问题描述

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

There are solutions to using legend onClick to toggle on/off visibility of (all other) datasets on the clicked chart, but I needed a way to sync this toggle on multiple charts if they have the same label/legend. For example, I have 6 charts presenting different information about the same data. However, not all the charts have all the datasets. One may have 5 datasets, another has 3 and so on. And they may not show up in the same order either.

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

由于找不到现有解决方案，因此我将其发布.

Since I did not find an existing solution, I'm posting this.

推荐答案

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

To do this, I put all the charts in a global var and loop through them to match dataset by legendItem.text instead of legendItem.datasetindex, since the label may or may not exist or even be in the same index position on other charts.

这是我创建/替换多个图表的方式: https://stackoverflow.com/a/51882403/1181367

Here's how I create/replace the multiple charts: https://stackoverflow.com/a/51882403/1181367

这是 legend 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();
                    }
                });
            }
        }
    }
};

这篇关于Chart.js同步图例在多个图表上切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！