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

我正在使用Chart.js创建折线图。我希望有四个不同的数据集，它们在默认情况下都是可见的，但是可以通过单击按钮来打开和关闭。如何做到这一点？我似乎在文档中找不到答案

.addData（）

、

.removeData（）

和

.update（）

似乎都用于向现有数据集添加或删除值，而不是添加或删除整个数据集。我认为这是一个相当常用的功能，但我在任何地方都找不到答案

在彻底研究之后，似乎没有任何内置函数来切换整个数据集。我使用

.destroy（）

函数删除整个现有图表，然后使用一些逻辑用必要的数据集重新绘制它

---

编辑：如果我的完整代码对任何人都有帮助的话，这里有一个小摆设->

这里是一个包含两个数据集的折线图。通过更新数据集并调用

.update（）

方法。这里的好处是你不需要破坏整个图表，并且有一个很好的动画过渡

TL:DR

逐步：

• 从CDN引入Chart.js

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

• 创建包含图表的HTML画布元素

  <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>
  

  
  折线图=新图表（document.getElementById（“折线图”）{
  键入：“行”，
  数据：{
  标签：['A'，'B'，'C'，'D']，
  数据集：[
  {
  标签：“设置1”，
  填充：是的，
  背景色：“rgba（90181242,0.2）”，
  边框颜色：“rgba（179181198,1）”，
  pointBorderColor:#fff“，
  pointBackgroundColor:“rgba（179181198,1）”，
  数据：[3,1,1,0]
  }, {
  标签：“集合2”，
  填充：是的，
  背景颜色：“rgba（255,99132,0.2）”，
  边框颜色：“rgba（255,99132,1）”，
  pointBorderColor:#fff“，
  pointBackgroundColor:“rgba（255,99132,1）”，
  pointBorderColor:#fff“，
  数据：[1,3,3,5]
  }
  ]
  },
  选项：{
  标题：{
  显示：对，
  文本：“图表标题”
  }
  }
  });
  函数restoreLayer2（）{
  lineChart.data.dataset[1].data=[1,3,3,5]；
  lineChart.update（）；
  }
  函数removeLayer2（）{
  lineChart.data.datasets[1]。数据=[]；
  lineChart.update（）；
  }
  

---

您是否可以通过一个工作示例添加到的链接？我无法让代码运行，我正在尝试做一些非常有趣的事情。谢谢，虽然有点晚了，但我忘了我在chart.js的fork中加入了一些虚线功能，这些功能在默认插件中不起作用。小提琴有我的完整代码，没有虚线。谢谢，太棒了！我在日志中发现了一个“currentChart未定义”错误，你知道@JoshWarren会出现什么问题吗？你的小提琴有一个非常好的按钮CSS，我想知道你是怎么做到的，因为小提琴中似乎没有CSS？按钮是普通的/没有样式的，所以我不确定我是否理解这个问题。动画转换是chart.js的一项功能，您所要做的就是在代码中调用

.update（）

。啊，对不起，我没有在小提琴中向下滚动，只是看到图例激活和禁用了这些行，并假设这是您的代码-假设现在chart.js中有一个用于此的内置函数？@user3144201是，动画是内置的。我所做的就是调用图表对象上的

update（）

。