Question

我正在创建Chart.js甜甜圈图，但是我有两个问题： 1.当我更新数据源时，图表不会更新，因此数据不会更新。 2.图表处于选项卡结构中，如果我更改了选项卡，然后又返回到图表选项卡，它就消失了，不会重绘。

如果我可以强制重画聊天，这两个问题都将得到解决，有什么方法可以解决？

<div style="display: block">
  <canvas baseChart height="220"
    [datasets]="productoChartData"
    [labels]="productoChartLabels"
    [options]="productoChartOptions"
    [legend]="productoChartLegend"
    [chartType]="productoChartType"
    [colors]="productoChartColors">
  </canvas>
</div>

和TS

  public confirmadosChartLabels = ['Confirmados', 'Oportunidades'];
  public confirmadosChartData: MultiDataSet = [
    [0, 0]
  ];
  public confirmadosChartType: ChartType = 'doughnut';
  public confirmadosChartOptions: {
    responsive: false;
    legend: {
      display: true,
      position: 'right',
      labels: {
        boxWidth: 20,
        padding: 20,
        fontSize: 12
      }
    }
  };
  public confirmadosChartLegend = true;
  public donutColors = [{
    backgroundColor: [
        'rgba(75, 176, 138, 1)',
        'rgba(58, 129, 245, 1)']
    }];

我这样更新数据源

const data: any = x.ResponseData;
this.confirmadosChartData[0][0] = data.Confirmadas;
this.confirmadosChartData[0][1] = data.Oportunidades;

Answer 1

尝试请按如下所述尝试。

var confirmadosChartData = this.confirmadosChartData;

比为其分配值

confirmadosChartData [0] [0] = data.Confirmadas; ConfirmadosChartData [0] [1] =数据。机会动物;

重新分配它。

this.confirmadosChartData = confirmadosChartData;

首先尝试清空数组，然后分配值。

this.confirmadosChartData = [] [];

const data：any = x.ResponseData;

this.confirmadosChartData [0] [0] = data.Confirmadas;   this.confirmadosChartData [0] [1] = data.Oportunidades;

强制图表重绘或更新Chart.js

1 个答案: