在Angular中更新chart.js

Question

我想通過添加API中的標簽和數據來創建圖表並進行更新。

我在Charts.component.ts中創建了一個方法addData （） ，其外觀如下：

 addData(chart, labels_builds,labels_data){
     chart.data.labels.push(labels_builds);
     chart.data.datasets.data.forEach(dataset => {
        dataset.data.push(labels_data);
     });
     chart.update();
 }

這將在這里調用：

getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
    this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
    .subscribe(pageChart =>{
        this.chartMisraLint = pageChart
      this.addData(this.myChart,pageChart.build,pageChart.data);
        })
    } 

在ngOnInit（）中，我有以下代碼：

ngOnInit() {
   this.getFilters();

   var ctx = document.getElementById("myChart");
   this.myChart = new Chart(ctx, {
   type: 'bar',
   data: {
       labels: [],
       datasets: [{
           label: '# of Total Messages',
           data: [],
          backgroundColor:'#ffe4c9',

       }]
   },
   options: {
       scales: {
           yAxes: [{
               ticks: {
                   beginAtZero:true,

               }
               ,
               scaleLabel: {
                 display: true,
                  labelString: 'Total Messages'
               }
           }]
           ,
           xAxes: [{
             scaleLabel: {
               display: true,
                labelString: 'Builds'
             }
           }]
       }
   }
});

我收到錯誤：ERROR TypeError：無法讀取未定義的屬性'forEach'。

如果有人可以向正確的方向推動我，將不勝感激！

Answer 1

從技術上講，您會收到此錯誤，因為您從未循環遍歷this.myChart.data.datasets.data。 您只輸入了它。 您可以通過設置默認數組來解決此問題，如下所示：

ngOnInit() {
   this.getFilters();

   var ctx = document.getElementById("myChart");
   this.myChart = new Chart(ctx, {
   type: 'bar',
   data: {
       labels: [] = [] // might as well,
       datasets: [{
           label: '# of Total Messages',
           data: [] = [], // <== note this part, the initialization
          backgroundColor:'#ffe4c9',

       }]
   },
   options: {
       scales: {
           yAxes: [{
               ticks: {
                   beginAtZero:true,

               }
               ,
               scaleLabel: {
                 display: true,
                  labelString: 'Total Messages'
               }
           }]
           ,
           xAxes: [{
             scaleLabel: {
               display: true,
                labelString: 'Builds'
             }
           }]
       }
   }
});

話雖如此，我很確定這不會解決您的功能目標。 我很確定您不想基於已經存在的項目從服務器調用中添加結果元素； 但只想全部添加。 坦率地說，您正在循環錯誤的數據。 因此，您還必須更改addData方法。 像這樣：

addData(chart, 
        labels_builds = [], // See comment below
        labels_data = [] // added this as an alternative null check for your server data.
){
     chart.data.labels = [
        ...chart.data.labels, // Check the ES6 spread operator, you'll like it.
        ...labels_builds      // In essence in this case it means "every element of"
     ];
     chart.data.datasets.data = [
        ...chart.data.datasets.data,
        ...labels_data
     ];
     chart.update();
 }

Answer 2

嘗試這個：

    updateChart() {
    //first set datasets length 0
    this.chart.data.datasets.length = 0;
    //call update method
    this.chart.update();

    const color = Chart.helpers.color;
    //define your data here
    let data1 = {
        labels: ['1 Jan', '2 Jan', '3 Jan', '4 Jan', '5 Jan', '6 Jan', '7 Jan'],
        datasets: [
            {
                fill: false,
                borderWidth: 3,
                backgroundColor: color(this.layoutConfigService.getConfig('colors.state.brand')).alpha(0.6).rgbString(),
                borderColor: this.layoutConfigService.getConfig('colors.state.primary'),
                label: 'Value1',
                pointStyle: 'line',
                pointHoverRadius: 4,
                pointHoverBorderWidth: 12,
                pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                pointHoverBackgroundColor: this.layoutConfigService.getConfig('colors.state.primary'),
                pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

                data: [this.getNo(), this.getNo(), this.getNo(), this.getNo(), this.getNo(),this.getNo(),this.getNo()]
            }
        ]
    };
    //asign data1 to chart data
    this.chart.data = data1;
    //again update chart
    this.chart.update();
}
getNo() {
    return Math.floor((Math.random() * 100 ) + 1);
}

這對我有用...！