使用“ng2图表”:“^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 + '%]'];
}
我需要根据图表数据更新图表标题,因为我希望图表标题中包含平均值、最大值和最小值。
但看起来图表选项是在数据绑定到图表之前分配的。是否可以在数据可用后设置标题?
2条答案
按热度按时间cunj1qz11#
很抱歉晚的回应,但在经历了同样的问题和解决它,我决定张贴答案无论如何,使下一个来这个线程可以解决它。
问题是,显然只有对数据和标签所做的更改才会被考虑重绘图表。因此,如果需要更改表的其他方面,可能需要用途:
不要忘记引用视图:
这将使用最新更改重新绘制图表。
ktecyv1j2#
我在2022年也遇到过同样的问题,而我所接受的答案对我来说并不适用。为了防止有人像我一样再次研究这个问题,我将离开最终对我有效的解决方案。
在Angular 组件中具有此属性
然后在ngOnInit()中我有
然后在数据可用时返回数据