Не удается прочитать свойство 'transition' null chartjs - PullRequest
Новая
       7

Не удается прочитать свойство 'transition' null chartjs

0 голосов
/ 07 февраля 2019

У меня есть динамические данные, которые необходимо поместить в цикл for для отображения данных, представляющих интерес.Я протестировал размещение анимации в 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();
}

Код выше динамически выбирайтецвет, зависания и на основе записанных данных.Смотрите для цикла.Есть ли другой способ решить эту проблему?

1 Ответ

0 голосов
/ 07 февраля 2019

Некоторые явные проблемы связаны с тем, что длина backgroundColor и borderColor может быть меньше this.monthcostlabor, что приводит к значениям undefined при загрузке через итератор bard.

Такжепочему вы не можете зациклить внутри конструктора? 

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(); */
...