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>

这是html，我将图表绘制在ID为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，因此即使是相同的Chart，也不会呈现

我认为问题一定是因为update删除了de canvas并再次创建它，但是过了一会儿我找不到解决方法

Answer 1

好吧，所以我设法解决了这个问题，希望这个答案可以帮助遇到相同问题的人在更新不起作用的情况下在同一画布上重新呈现图表。

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

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

所以我可以渲染第一个图表，它在OnInit上无法完成，因为您需要准备好画布，因此，我一直在等待画布准备就绪，就像我在问题中发布的方法设置一样< / p>

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

Update的问题我认为它还会破坏画布并使用相同的ID创建一个新的画布，因此我认为它会尝试在画布准备就绪之前呈现图表，因此我做出了类似的解决方法

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

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

使用此代码，我的ngAfterContentChecked将要求进行设置，直到画布准备就绪并再次将其初始化为true

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

ChartJS更新后未呈现

1 个答案: