Question

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

Answer 1

在彻底研究完之后，似乎没有任何内置函数来切换整个数据集。我使用.destroy()函数删除整个现有图表，然后使用一些逻辑用必要的数据集重绘它。

编辑：如果它对任何人都有帮助，那么这就是我的完整代码的小提琴 - ＆gt; 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>
```
此示例的隐藏/显示按钮

创建图表以及实时更新图表的功能-请注意，相同的整数数据需要在两个位置复制-在初始创建和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？

2 个答案: