Question

我有一个动态数据，需要将其放入for循环中才能显示感兴趣的数据。我测试了将issue中的动画设置为0，然后尝试使用相同的update（）函数。

这是我的下面的代码

barChartMonth() {
  let backgroundColor: any = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
  ];

  let borderColor: any = [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'
  ];


  this.barChart = new Chart(this.barCanvas.nativeElement, {
    type: 'bar',
    data: {
      labels: this.monthcostlabor,
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
  for(let bard = 0; bard < this.monthcostlabor.length; bard++){
    this.barChart.data.datasets.push({ label: this.monthcostlabor[bard], backgroundColor: backgroundColor[bard], borderColor: borderColor[bard], borderWidth: 1 });
  }
  this.barChart.data.datasets.forEach(element => {
    element.data.push(this.monthcostglobal)
  });
  this.barChart.update();
}

上面的代码根据记录的数据动态选择颜色，悬停。请参阅循环。还有其他解决方法吗？

Answer 1

一些明显的问题是backgroundColor和borderColor的长度如何小于this.monthcostlabor的长度，从而在通过{{1}加载时导致undefined的值}迭代器。

而且，为什么不能在构造函数中循环？

bard

Answer 2

即使您在同一页面上有多个图表，也可能会发生这种情况。我用setTimeout

解决了（暂时，因为我不喜欢这种方式）

Answer 3

我想这个问题与异步api调用有关

我用：

解决了

  async setChart () {
    this.myChart = await this.apiService.setChartData(this.myChart, this.myCanvas);
    this.myChart.update();
  }


  async this.apiService.setChartData(mChart, mCanvas) {
    mChart.data = this.getChrData(mLabel, dtSets, this.colourList, this.colourBordList, cType);
    mChart.data.labels = mLabel;
    return mChart;
  }

Answer 4

同样的问题发生在我身上。我使用 setTimeout(function(){chart.update()},50) 解决了它，但您的解决方案更优雅。不错

无法读取属性'transition'null chart.js

4 个答案: