javascript - Cannot read property 'transition' null chartjs - Stack Overflow

admin管理员组

文章数量:1317915

I have a dynamic data that is need to be put inside a for loop in order to display the data of interest. I tested putting animation into 0 from this issue and also try the same update() function.

This is my code below

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

The code above dynamically choose color, hover and based on the data recorded. See for loop. Is there any other way to solve this issue?

I have a dynamic data that is need to be put inside a for loop in order to display the data of interest. I tested putting animation into 0 from this issue and also try the same update() function.

This is my code below

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

The code above dynamically choose color, hover and based on the data recorded. See for loop. Is there any other way to solve this issue?

• javascript
• ionic-framework
• chart.js

Share Improve this question Follow edited Feb 7, 2019 at 4:49 Kamalesh M. Talaviya 1,42011 gold badge1313 silver badges2727 bronze badges asked Feb 7, 2019 at 3:54 Kevin Ren Budlao PalladoKevin Ren Budlao Pallado 10311 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

A few of the glaring problems is how the length of backgroundColor and borderColor could be less than this.monthcostlabor leading to undefined values when loaded through the bard iterator.

Also, why cannot you loop within the constructor?

this.barChart = new Chart(this.barCanvas.nativeElement, {
  type: 'bar',
  data: {
    labels: this.monthcostlabor,
    datasets: this.monthcostlabor.map((elem,i) => ({ 
         label: elem, 
         backgroundColor: backgroundColor[(i % backgroundColor.length)], 
         borderColor: borderColor[(i % borderColor.length)], 
         borderWidth: 1, 
         data:[this.monthcostglobal] })); // the second push() can be included here?    
  },
  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(); */

I guess the problem is related to async api calls

I solved it with :

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

Same issue was happened to me. I resolved it using a setTimeout(function(){chart.update()},50) but your solution is more elegant. Nice

本文标签： javascriptCannot read property 39transition39 null chartjsStack Overflow