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

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

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

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

Answer 1

抱歉回复晚了，但在遇到同样的问题并解决之后，我决定 post 无论如何都要回答这个问题，以便下一个来到这个话题的人可以解决它。

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

this.chart.refresh();

别忘了引用视图：

@ViewChild(BaseChartDirective) chart;

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

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

ng2-charts: How to set Title of chart dynamically in typescript

javascript

chart.js

ng2-charts

angular