ChartJS 更新后不呈现

Question

我尝试在使用以下代码应用或清除过滤器后更新图表的值

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

这是我在 canvas 上使用 id myChart

呈现图表的 html

这是我生成第一个图表的代码，它只执行一次并且有效

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

它不起作用，它不渲染任何东西，我什至尝试将以前的图表与引入相同值的新图表进行比较，它 returns 是真的，所以即使是同一个图表，它也是'渲染

我想这个问题一定是因为update删除了de canvas然后重新创建，但是过了一段时间我找不到解决方法

Answer 1

好的，所以我设法解决了这个问题，我希望这个答案可以帮助遇到相同问题的人，如果更新不起作用，则在同一 canvas 上重新渲染图表。

首先我有这个生命周期方法

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

所以我可以渲染第一个图表，它不能在 OnInit 上完成，因为你需要 canvas 准备好，所以我一直在等待 canvas 准备好就像我在问题

上发布的方法设置一样

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

更新的问题我认为它也破坏了 canvas 并创建了一个具有相同 ID 的新的，所以我认为它会尝试在 canvas 准备好之前渲染图表，所以我做了这样的解决方法

应用所有需要的过滤器并检索新数据后

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

使用此代码，我的 ngAfterContentChecked 将调用设置，直到 canvas 准备好并再次将初始化更改为 true

我知道这可能不是最好的解决方法，但至少它解决了我的问题

ChartJS 更新后不呈现

ChartJS not rendering after update

javascript

dom

chart.js

angular

chartjs-2.6.0