Javascript 为什么我的两张图表重复相同的标签？

我必须使用ChartJS生成两个条形图。 出于某种原因，顶部和底部图形共享同一标签

  var data = {
      labels: [],
      datasets: [
          {
              fillColor: "rgba(151,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)"
          }
      ]
  };
  var options = {
      animation: true,
      responsive: true
  };


  var ctx1 = document.getElementById("february-chart").getContext("2d");
  februaryChart = new Chart(ctx1).Bar(data, options);

  var ctx2 = document.getElementById("march-chart").getContext("2d");
  marchChart = new Chart(ctx2).Bar(data, options);


  februaryChart.addData([2], 'aaaa');
  marchChart.addData([5], 'bbbb');

---

因为它们共享对同一数据对象的引用。当您调用addData方法时，它们都在更改同一个对象。为每个实例提供不同的数据对象，您仍然可以共享这些选项，前提是您希望它们相同

我认为addData方法正在更新作为数据传入的变量。由于在两个图表中都使用了它，因此它们都会得到更新。这只是猜测，但似乎证实了这一点

var marchData = {
    labels: [],
    datasets: [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)"
        }
    ]
};
var febData = {
    labels: [],
    datasets: [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)"
        }
    ]
};
var options = {
    animation: true,
    responsive: true
};



var ctx1 = document.getElementById("february-chart").getContext("2d");
februaryChart = new Chart(ctx1).Bar(febData, options);

var ctx2 = document.getElementById("march-chart").getContext("2d");
marchChart = new Chart(ctx2).Bar(marchData, options);


februaryChart.addData([2], 'aaaa');
marchChart.addData([5], 'bbbb');