Обновление chart.js в Angular

Question

Я хочу создать диаграмму, добавив метки и данные из API, и обновлю ее.

Я создаю метод addData () в charts.component.ts, который просматриваеттаким образом:

 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);
        })
    } 

In 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'
             }
           }]
       }
   }
});

Я получаю сообщение об ошибке: ОШИБКА TypeError: Невозможно прочитать свойство 'forEach' из неопределенного значения.

Если кто-нибудь сможет подтолкнуть меня в правильном направлении, это будет с благодарностью!

Answer 1

Попробуйте:

    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);
}

Это сработало для меня ...!

Answer 2

Технически вы получаете эту ошибку, потому что вы никогда не инициализировали 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();
 }