ng2-charts：如何在打字稿中动态设置图表标题答案

【问题标题】：ng2-charts: How to set Title of chart dynamically in typescriptng2-charts：如何在打字稿中动态设置图表标题
【发布时间】：2019-05-21 15:56:14
【问题描述】：

使用“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 + '%]'];
      }

我需要根据图表数据更新图表标题，因为我想要图表标题中的 Avg、Max 和 Min 值。

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

【问题讨论】：

标签： javascript angular chart.js ng2-charts

【解决方案1】：

很抱歉回复晚了，但在遇到同样的问题并解决之后，我决定还是发布答案，以便下一个来这个线程的人可以解决它。

问题在于，显然只有对数据和标签所做的更改才会被视为重绘图表。因此，如果您需要更改您可能想要使用的表格的其他方面：

this.chart.refresh();

不要忘记引用视图：

@ViewChild(BaseChartDirective) chart;

这将使用您的最新更改重新绘制图表。

【讨论】：