如何将数据集切换添加到 Chart.js？

Question

我正在使用 Chart.js 创建折线图。我想要四个不同的数据集，默认情况下它们都是可见的，但可以通过单击按钮来打开和关闭。如何实现？我似乎无法在文档中找到答案。 .addData()、.removeData() 和 .update() 似乎都用于向现有数据集添加或删除值，而不是添加或删除整个数据集。我认为这将是相当常用的功能，但我无法在任何地方找到答案。

Answer 1

对此进行彻底研究后，似乎没有任何内置函数可以切换整个数据集。我使用 .destroy() 函数删除了整个现有图表，然后使用一些逻辑用必要的数据集重新绘制它。

编辑：如果对任何人有帮助，这里是 fiddle 和我的完整代码 -> http://jsfiddle.net/21xg27kr/4/

Answer 2

这是一个包含两个数据集的折线图。通过更新数据集并调用 .update() 方法。这里的好处是你不需要破坏整个图表，而且有一个很好的动画过渡which can be disabled。

TL:DR; solution on jsfiddle

一步一步：

从 CDN 引入 Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

创建将包含图表的 HTML Canvas 元素
```
<canvas id="line-chart"></canvas>
```
Hide/Show 这个例子的按钮

创建图表和实时更新图表的函数 - 请注意，需要在两个地方复制相同的整数数据 - 在初始创建和显示函数中。

 <script>
 lineChart = new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: ['A', 'B', 'C', 'D'],
            datasets: [
                {
                    label: "Set 1",
                    fill: true,
                    backgroundColor: "rgba(90,181,242,0.2)",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                    data: [3, 1, 1, 0]
                }, {
                    label: "Set 2",
                    fill: true,
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    data: [1, 3, 3, 5]
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Chart Title'
            }
        }
    });

   function restoreLayer2(){
        lineChart.data.datasets[1].data = [1, 3, 3, 5];
        lineChart.update();
    }

    function removeLayer2() {
        lineChart.data.datasets[1].data = [];
        lineChart.update();
    }
</script>

如何将数据集切换添加到 Chart.js？

How to add a dataset toggle to Chart.js?

javascript

jquery

chart.js