Using "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 + '%]'];
}
我需要从图表数据更新图表标题，因为我希望图表标题中的平均值、最大值和最小值。
但看起来在将数据绑定到图表之前分配了图表选项。是否可以在数据可用后设置标题？
很抱歉回复晚了，但在遇到同样的问题并解决了它之后，我决定无论如何都要发布答案，以便下一个来到这个线程的人可以解决它。
问题在于，显然只有对数据和标签所做的更改才会被视为重绘图表。因此，如果您需要更改表的其他方面，您可能需要使用：
this.chart.refresh();
不要忘记引用视图：
@ViewChild(BaseChartDirective) chart;
这将使用您的最新更改重新绘制图表。
刚刚在 2022 年遇到了同样的问题，接受的答案对我不起作用。以防万一有人现在像我一样再次研究这个问题，我将留下最终对我有用的解决方法。
在角度组件中具有此属性
chartOptions!: ChartOptions;
然后在 ngOnInit(( 中我有
// define chart options
this.chartOptions = this.getChartOptions();
然后在数据可用时返回数据
getChartOptions(): ChartOptions {
return {
responsive: true,
title: {
display: true,
text: this.getChartTitle()
},
};
}
2023年注意事项
如果它仍然不起作用，我们需要通过plugins来设置它，而不是使用 ng2 图表ChartOptions对象。查看有关 https://www.chartjs.org/docs/latest/configuration/title.html 的更多信息
所以简而言之，我们可以使用另一个这样的函数：
GetChartOptions(newTitle: string): ChartConfiguration['options']
{
return {
plugins: {
title: {
display: true,
text: newTitle,
font: {
size: 20
}
}
}
};
}
我们通过更改画布 html 上的属性映射(参见[options]="lineChartOptions">，单向映射(来更改
<canvas
baseChart
class="chart"
[id]="'line'"
[data]="lineChartData"
[options]="lineChartOptions"
[type]="lineChartType"
[legend]="true"
></canvas>
这些操作可以通过调用ChangeTitle()来完成，并在该代码中调用填充单向映射属性的GetChartOptions('newTitle anything aaaa')
@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
public lineChartOptions: ChartConfiguration['options'] = {
plugins: {
title: {
display: true,
text: "Chart Line",
font: {
size: 20
}
}
}
}
public ChangeTitle()
{
this.lineChartOptions = this.GetChartOptions("aaaa");
this.chart?.chart?.update(); // Don't forget to update, if not it won't be refreshed!
}
您可以通过用户的输入或任何您想要的内容来设置值，并将其放入选项构建器功能中。
使用 ng2-charts v4.1.1 (chartjs v4.x.x(，render()函数对我有用：
@ViewChild(BaseChartDirective) chart;
...
this.chart?.render();
从这里的文档
Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use .update() in that case.