Chart.js具有一个常见图例的多个图表 [英] Chart.js Multiple charts with one common legend

问题描述

一页上有多个图表。
每条图表线都是公用的。
我想显示多个图表通用的图例，如图所示，它使用默认值图例显示和隐藏所有带有OnClick的图线。

这个是假的

There are multiple charts on one page. Each chart line is common. I want to display a legend that is common to multiple charts like the figure.It shows and hides all chart lines with OnClick like the default legend. THIS PICT IS FAKE

有可能吗？

我尝试了 Chart.js同步图例在多个图表上进行切换，一个图例，多个图表Chart JS 等。
但是，这些解决方案都有一个图表图例，该图例会影响其他图表。

I had tried Chart.js sync legend toggle on multiple charts, One legend, multiple charts Chart JS and etc. But, those solutions have one chart with legend, and that legend affects other charts.

我应该隐藏图表并仅显示图例吗？
我应该绘制没有数据的图表吗？

Should I hide the chart and show only the legend? Should I draw a chart with no data?

如果您能告诉我，我将是研究生

I would be grad if you could tell me

HTML

<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<div>
    <canvas id="myChartA"></canvas>
</div>

<div>
    <canvas id="myChartB"></canvas>
</div>

JS

var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");

let data_A1 = [{
        x: "2019-01-01 00:01:38",
        y: "13.0"
    },
    {
        x: "2019-01-01 01:01:39",
        y: "11.0"
    },
    {
        x: "2019-01-01 02:01:40",
        y: "16.0"
    },
    {
        x: "2019-01-01 03:01:41",
        y: "15.0"
    },
    {
        x: "2019-01-01 04:01:42",
        y: "14.0"
    }
];

var data_A2 = [{
    x: "2019-01-01 00:01:42",
    y: 14.671
}, {
    x: "2019-01-01 01:01:42",
    y: 13.691
}, {
    x: "2019-01-01 02:01:42",
    y: 16.691
}, {
    x: "2019-01-01 03:01:42",
    y: 17.691
}, {
    x: "2019-01-01 04:01:42",
    y: 18.691
}];

let data_B1 = [{
        x: "2019-01-02 00:01:38",
        y: "12.0"
    },
    {
        x: "2019-01-02 01:01:39",
        y: "11.0"
    },
    {
        x: "2019-01-02 02:01:40",
        y: "13.0"
    },
    {
        x: "2019-01-02 03:01:41",
        y: "14.0"
    },
    {
        x: "2019-01-02 04:01:42",
        y: "16.0"
    }
];

var data_B2 = [{
    x: "2019-01-02 00:00:00",
    y: 14.671
}, {
    x: "2019-01-02 01:01:42",
    y: 13.691
}, {
    x: "2019-01-02 02:01:42",
    y: 16.691
}, {
    x: "2019-01-02 03:01:42",
    y: 15.691
}, {
    x: "2019-01-02 04:01:42",
    y: 14.691
}];


var myChartA = new Chart(ctxA, {
    type: 'line',
    data: {
        datasets: [{
            label: '1st Data',
            data: data_A1,
            borderColor: '#0f0',
            showLine: true
        }, {
            label: '2nd Data',
            data: data_A2,
            borderColor: '#f00',
            showLine: true
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormat: 'h:mm',
                }
            }]
        }
    }
});

var myChartB = new Chart(ctxB, {
    type: 'line',
    data: {
        datasets: [{
            label: '1st Data',
            data: data_B1,
            borderColor: '#0f0',
            showLine: true
        }, {
            label: '2nd Data',
            data: data_B2,
            borderColor: '#f00',
            showLine: true
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormat: 'h:mm',
                }
            }]
        }
    }
});

推荐答案

您可以创建一个通用图例，并通过generateLegend api，如果两个数据集都相似。

You can create a common legend and through generateLegend api, if both the datasets are similar.

首先通过选项禁用默认图例

First disable the default legends though the options

legend: {
        display: false
      }

然后使用generateLegend（）api获取数据标签并将其设置为公共元素。

Then use generateLegend() api to get the data labels and set it to a common element.

<ul class="legend">

</ul>

然后将事件侦听器添加到生成的元素并定位所有图表

Then add event listeners to the generated elements and target all the charts

document.querySelector('.legend').innerHTML = myChartA.generateLegend();

var legendItems = document.querySelector('.legend').getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i++) {
  legendItems[i].addEventListener("click", legendClickCallback.bind(this,i), false);
}

function legendClickCallback(legendItemIndex){
  document.querySelectorAll('.myChart').forEach((chartItem,index)=>{
    var chart = Chart.instances[index];
    var dataItem = chart.data.datasets[legendItemIndex]    
    if(dataItem.hidden == true || dataItem.hidden == null){
      dataItem.hidden = false;
    } else {
      dataItem.hidden = true;
    }
    chart.update();
  })  
}

这里有一个示例笔
https://codepen.io/srajagop/pen/yLBJOOo

注意我正在使用chartjs 2.8

Note I am using chartjs 2.8

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