Chart.js多个图表使用一个共同的图例

Question

Chart.js多个图表使用一个共同的图例

javascripthtmlchart.js

5

在一个页面上有多个图表。每个图表线条都是共同的。我想显示一个类似于图例的对多个图表共同的图例。它可以像默认图例一样通过 OnClick 显示和隐藏所有图表线条。

THIS PICT IS FAKE 这是否可能？怎么做？

我尝试过在多个图表上使用 Chart.js 同步图例切换, 一个图例，多个 Chart JS 图表等等。但是，这些解决方案只有一个带有图例的图表，并且该图例会影响其他图表。

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

如果您能告诉我就好了

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',
                }
            }]
        }
    }
});

- prophet5

你用测试版的原因是什么？ - karthick

2个回答

1

如果有人使用React版本的Chartjs，特别是react-chartjs-2，我已经使用React Hooks和react-chartjs-2完成了它，可以在沙盒demo中查看。

- user10070377

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karthick · Accepted Answer

你可以创建一个共同的图例，通过使用generateLegend API，如果两个数据集相似的话。

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

legend: {
        display: false
      }

然后使用 generateLegend() API 获取数据标签并将其设置到常见元素中。

<ul class="legend">

</ul>

然后为生成的元素添加事件监听器，并针对所有图表进行目标设置。

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。