网址:
<canvas *ngIf="actionData" baseChart width=800 height=300
[datasets]="lineActionData"
[labels]="lineActionLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
组件:
public lineChartData:Array<any> = [
{data: [], label: ''}
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'},
];
etc
我在HTML中创建了一个图表。在我的 *.ts文件中,我有带有数据和选项的变量。然后我调用一个方法来更新lineData。我已经在网上搜索过了,但没有找到如何更新/重绘图表。如果我用按钮改变图表的类型(即从线到条再到线),那么图表会用新的数据重新绘制自己。但是如何在更新数据变量的值之后直接执行此操作?我找到的所有方法都不适合我的解决方案。Thx帮助
7条答案
按热度按时间qrjkbowd1#
这里是解决方案,数据更新后,简单的barChartData = null和barChartData =“新数据”。
unhi4e5o2#
这是组件中的一个bug。您可以按照ng2-charts/charts/charts.js路径进行更改。参考(https://github.com/valor-software/ng2-charts/issues/614)
7vhp5slm3#
试试这个
vecaoik14#
使用ngOnChanges()方法。
2w3kk1z55#
请遵循这个,它会工作!
1)进口这些…
2)在导出类中(在ts文件中)添加以下内容.
然后,首先你应该初始化包含数据和标签信息的对象。1,1,1是一个例子,你可以使用0,如果你想...
3)在你的ngOnInit方法中添加一个setString函数,或者通过http调用后端;
4)在html文件中,确保将baseChart添加到canvas标记中
5)只是为了探索更多,在ngOnInit方法中,您可以执行(this.chart.chart)的console.log,您将找到有关对象的更多信息...
希望能帮上忙!
ryevplcw6#
您可以通过ViewChild绑定chart指令,如下所示:
每次数据集发生变化时,只需调用
updateChart
即可使图表保持最新!yx2lnoni7#
使用
update()
方法的chartjs