时间戳

首页 > 解决方案 > 使用更新按钮 (chart.js) 将 2 个图表合并为 1 个图表

javascript - 使用更新按钮 (chart.js) 将 2 个图表合并为 1 个图表

问题描述

我只是想知道如何使用 chart.js 将 2 个图表组合成 1 个图表

我想将显示的图表（使用按钮-onclick 功能-）合并到 1 个混合图表中，这样我就可以看到数据的比较

我在 chart.js 上看到了很多混合图表，但想先有 2 组图表然后变成 1 组图表

JSFIDDLE

Here

标签： javascriptchartschart.js

解决方案

Chart.js 文档： https ://www.chartjs.org/docs/latest/developers/updates.html

单击按钮时，您将合并此代码

chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();

然后要删除您的其他图表，您将使用 chart.destroy()。

或者，您可以首先加载图表的数据，然后将单击时要显示的数据系列的可见性更改为无，并将旧图表的可见性设置为无。如果您使用大量数据集，这在客户端上会更轻松，并且在使用 jQuery 的 .toggle() 函数时更容易控制。

https://www.chartjs.org/docs/3.0.0-alpha/developers/api.html

推荐阅读