javascript - ng2-charts:如何在 typescript 中动态设置图表标题

Question

使用“ng2-charts”:“^1.6.0”。我有一个像这样的折线图:

<canvas baseChart
              [datasets]="lineChartData"
              [labels]="lineChartLabels"
              [options]="lineChartOptions"
              [colors]="lineChartColors"
              [legend]="lineChartLegend"
              [chartType]="lineChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>

我有一个变量设置如下选项:

this.lineChartOptions = {
      responsive: true,
      animation: {
        duration: 5000, // general animation time
      },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'series'
        }]
      },
      title: {
        display: true,
        text: this.getChartTitle()
      }
    }
    this.lineChartOptions.update();
  }

这是 getChartTitle 方法。

getChartTitle(): string[] {
   const data = this.chartData.map(point => point.y); // grab only points within the visible range

return ['ChartName',
        '(Data for ' + this.startDate + ' to ' + this.endDate + ')',
        '[<b>Avg Value:</b> ' + Math.round(data.reduce((a, b) => a + b, 0) / data.length * 100) / 100 +
        '%<b>Min Value:</b> ' + Math.round(Math.min.apply(null, data) * 100) / 100 +
        '%<b>Max Value:</b> ' + Math.round(Math.max.apply(null, data) * 100) / 100 + '%]'];
      }

我需要根据图表数据更新图表标题，因为我想要图表标题中的平均值、最大值和最小值。

但看起来图表选项是在数据绑定(bind)到图表之前分配的。数据出来后可以设置标题吗？

Answer 1

很抱歉回复晚了，但在经历了同样的问题并解决之后，我决定无论如何都要发布答案，以便下一个来到此线程的人可以解决它。

问题在于，显然只有对数据和标签进行的更改才会被考虑重新绘制图表。因此，如果您需要更改表的其他方面，您可能需要使用:

this.chart.refresh();

不要忘记引用 View :

@ViewChild(BaseChartDirective) chart;

这将根据您的最新更改重新绘制图表。