ChartJS не рендерится после обновления - PullRequest
Новая
       26

ChartJS не рендерится после обновления

0 голосов
/ 26 июня 2019

Я пытаюсь обновить значения моего графика после применения или очистки фильтров следующим кодом 

 <div class="col-xs-8 card-container" style="padding: 0 0 0 0">
<mat-card  height="100%" style="padding: 16px 0px 16px 16px !important; height:100%">
    <mat-card-title style="text-align:center;">Gráfica</mat-card-title>
    <mat-card-content>
        <div style="display: block; width: 100%" id="canvasContainer" *ngIf="!emptyData()">
            <canvas  id="myChart"></canvas>   
        </div>
        <div style="display: block; width: 100%" *ngIf="emptyData()">
            <h3>Pendiente de evaluar.</h3>
        </div>
    </mat-card-content> 
</mat-card>

это HTML, где я отображаю диаграмму на холсте с идентификатором myChart

это код, где я генерирую свой первый график, он выполняется только один раз и работает 

  setup(): void{
const maxValue = this.getMaxValue();
var ctddx = document.getElementById('myChart');
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
this.ctx = canvas.getContext("2d");
      this.chart= new Chart(this.ctx, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [{
            data: this.values,
            borderWidth: 3,
            fillColor: this.colors,
            backgroundColor: this.colors,
            borderColor: this.colors
        }]
    },
      options: {
        responsive: true,
        legend: {
            display: false
        },
        hover: {
            mode: 'label'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function (value) { if (Number.isInteger(value)) { return value; } },
                    suggestedMax: maxValue,
                }
            }],
            xAxes: [{
              fontSize: 35,
              barThickness : 65
          }],
        },

        plugins: {
            datalabels: {
                // align: 'start',
                // anchor: 'start',
                clamp: true,
            }
        }
      }
    });
    this.initialized = true;
  }
 }

до этого момента код работает и правильно отображает первый график. Теперь, когда я пытаюсь применить фильтры или очистить фильтры, он ничего не отображает, это следующий код 

 modifyChart(labels,values){
  let oldchart = this.chart;
  this.removeData();
  this.addData(labels,values);
  console.log(oldchart===this.chart);
  }

   removeData() {
    this.chart.data.labels.pop();
    this.chart.data.datasets.forEach((dataset) => {
    dataset.data.pop();
   });
   this.chart.update();
}
 addData(label, data) {
  this.chart.data.labels.push(label);
  this.chart.data.datasets.forEach((dataset) => {
  dataset.data.push(data);
  });
 this.chart.update();
}

Это не работает, ничего не рендерится, и я даже пытался сравнить предыдущий график с новым графиком, представляя те же значения, что и у него, и возвращает значение true, поэтому, даже если тот же график, он не рендерится

Я думаю, что проблема в том, что обновление удаляет de canvas и создает его снова, но через некоторое время я не могу найти обходной путь

1 Ответ

0 голосов
/ 27 июня 2019

Хорошо, поэтому мне удалось это исправить, я надеюсь, что этот ответ может помочь кому-то, кто сталкивается с той же проблемой при повторном рендеринге диаграмм на том же холсте, если обновление не работает.

прежде всего, у меня был этот метод жизненного цикла 

  ngAfterContentChecked(): void {
if (!this.initialized && !this.emptyData()) {
    this.setup();
  }
}

Таким образом, я могу отобразить первый график, это не может быть сделано в OnInit, потому что вам нужен холст, чтобы быть готовым, поэтому с этим я всегда жду готовности холста, как мои настройки метода, которые я разместил на вопросе 

 setup(): void{
  const maxValue = this.getMaxValue();
  var canvas = <HTMLCanvasElement> document.getElementById('myChart');
  if(canvas !== null) {
        ...
  this.initialized = true;
     }
  }

проблема с обновлением. Я думаю, что он также разрушает холст и создает новый с тем же Id, поэтому я думаю, что он пытается визуализировать диаграмму до того, как холст будет готов, поэтому я сделал обходной путь, подобный этому

после применения всех необходимых фильтров и получения новых данных 

modifyChart() {
this.chart.destroy();
this.initialized = false;
}

с этим кодом, мой ngAfterContentChecked будет вызывать для установки до тех пор, пока canvas не будет готов, и снова изменить инициализированное значение на истинное

Я знаю, что это, вероятно, не лучший обходной путь, но, по крайней мере, это решило мою проблему

...