如何在Chart.js中添加数据集切换？

Question

我正在使用Chart.js创建一条线图。我希望有四个不同的数据集，所有数据集都默认可见，但可以通过点击按钮切换开关。如何实现这一点？我在文档中找不到答案。.addData（），.removeData（）和.update（）似乎都用于添加或删除现有数据集的值，而不是添加或删除整个数据集。我认为这应该是一个常用的特性，但我找不到任何答案。

- Josh Warren

Answer 1

经过深入研究，似乎没有内置的函数可以切换整个数据集。我使用了.destroy()函数来删除整个现有图表，然后使用一些逻辑重新绘制它所需的数据集。

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

- Josh Warren

---

你能否添加一个指向 http://jsfiddle.net/ 的链接，并提供一个可运行的示例？我无法让代码运行起来，而我正试图做一些非常相似的事情。谢谢。 - lucky boost

有点晚了，但是这里是链接 - http://jsfiddle.net/21xg27kr/4/。我忘记了我从 chart.js 的一个分支中加入了一些虚线功能，这在默认插件中不起作用。这个 fiddle 包含了我的完整代码，但没有虚线。 - Josh Warren

谢谢，太棒了！ - lucky boost

日志中出现“currentChart未定义”的错误，@JoshWarren有什么想法？ - thesowismine

Answer 2

这是一张包含两个数据集的折线图。通过更新数据集并调用.update()方法，您可以获得好处，即无需销毁整个图表，并且有一个漂亮的动画过渡（可以禁用）。

TL:DR; 在jsfiddle上的解决方案 步骤如下：

• Bring in Chart.js from a CDN

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

• Create the HTML Canvas element that will hold the chart

  <canvas id="line-chart"></canvas>
  

• Hide/Show buttons for this example

• Creating the chart, and the functions to update it live - notice that the same integer data needs to be copied in two places - in the initial creation, and in the show function.

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

- orangecaterpillar

---

你的fiddle按钮有一个非常漂亮的CSS，我想知道你是如何做到的，因为似乎在fiddle中没有任何CSS？ - user3144201

按钮是普通/未经样式设计的，所以我不确定我是否理解了问题。动画过渡是chart.js的一个特性，你只需要在你的代码中调用<chartObject>.update()即可。 - orangecaterpillar

啊，抱歉，我没有在 fiddle 中向下滚动，只看到图例激活和禁用了线条，并假设那是你的代码 - 那么现在 chart.js 中有一个内置函数来实现这个功能了吗？ - user3144201

@user3144201 是的，动画是内置的。我所做的就是在图表对象上调用 update()。 - orangecaterpillar

我已经为您更新了这个：http://jsfiddle.net/wb5tdo1q/2/ - Alex Barker