我正在应用程序中添加 chartjs ,并希望根据运行时的条件更改特定点的背景颜色。我能够正确绘制图表,但不知道如何更改图表颜色。
从 chartjs 文档中,我了解我们可以使用pointBackgroundColor进行操作,但是所有在线示例均包含设计时示例。
我尝试使用this._chart.chart.data.datasets[0].pointBackgroundColor = "red";
,但是它更改为所有点,而不是特定点
我的版本:
角度ver 6
chartjs版本2.7.3
ng2-charts 1.6.0
Component.ts代码
@ViewChild(BaseChartDirective) public _chart: BaseChartDirective;
constructor(private router: Router, private _realtimeData : RealtimeDataService) {
this._realtimeData.getRealtimeData(1)).subscribe(data =>
{
for (let stat of data)
{
this.labels.push(newDate(stat.DateTime).toLocaleDateString('de-IN', this.options));
this.datasets_lines[0].data.push(stat.value);
this.datasets_lines[1].data.push(stat.value1);
this.datasets_lines[2].data.push(stat.vlue2);
if ((stat.value > stat.value1) || (stat.value< stat.vlue2))
{
this._chart.chart.data.datasets[0].pointBorderColor = "red";
}
else
{
this._chart.chart.data.datasets[0].pointBorderColor = "black";
}
this._chart.chart.update();
}
}
}
public chartColors: Array<any> = [
{ // first color
borderColor: "#36ff2f",
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
},
{ // first color
borderColor: '#1780cc',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
},
{ // second color
borderColor: '#ed8b00',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
}];
HTML代码
<canvas
#mylinechart
baseChart
[chartType]="'line'"
[datasets]="datasets_lines"
[labels]="labels"
[options]="chartOptions"
[legend]="true"
[colors]="chartColors"
</canvas>
答案 0 :(得分:0)
我认为您可以直接更改此变量chartColors
并获得输出。
if (true)
{
this.chartColors[0].pointBorderColor = "red";
}