ChartJS，合并多个图表的图例 [英] ChartJS, merge legends for multiple charts

问题描述

我有多个图表显示不同的数据。但是它们都是相同的对象类型e.ge [acc1，acc2，acc3]。因此，我想知道是否可以在某个页面的某个页面上设置一个父图例，然后单击它会显示/隐藏所有图表中的所有对应数据集？

I have multiple charts showing different data. however they are all the same object type e.ge [acc1, acc2, acc3]. Therefore I was wondering if it is possible to have one parent legend set on a page somewhere and clicking it will show/hide all the corresponding dataset from all the charts?

推荐答案

我认为您可以隐藏图表中的所有图例（一个除外），并实现自定义onClick函数来处理对该图例的单击，并隐藏每个图表的所有相应数据集。

I think you can hide all the legends of the charts except for one and implement a custom onClick function to handle clicks on that legend and hide all the corresponding datasets for each chart.

当前的onClick实现如下所示：

The current onClick implementation looks like this:

    onClick: function(e, legendItem) {
        var index = legendItem.datasetIndex;
        var ci = this.chart;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

        // We hid a dataset ... rerender the chart
        ci.update();
    }

此功能需要在 options.legend中定义.onClick 。为了完成这项工作，您需要重写上面的函数以实现循环，选择所有必需的图表并选择元，将其隐藏并更新图表。

This function needs to be defined in options.legend.onClick. To make this work you would need to rewrite the above function to implement a loop, selecting all the charts necessary and select the meta, hide it and update the chart.

这篇关于ChartJS，合并多个图表的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！