我正在使用Angular 2尝试ng2图表。我首先按照示例创建折线图。它使用数据集初始化图表,如下所示:
public lineChartData:Array<any> = [
{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'}
];
我想通过从服务器检索数据来推进 - 这有效,但我不再想要硬编码的初始数据集。如果我将lineChartData
更改为空,则会出现以下错误:
ERROR Error: ng-charts configuration error,
data or datasets field are required to render char line
Stack trace:
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getDatasets@http://localhost:4200/vendor.bundle.js:31447:19
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getChartBuilder@http://localhost:4200/vendor.bundle.js:31375:24
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.refresh@http://localhost:4200/vendor.bundle.js:31457:22
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.ngOnInit@http://localhost:4200/vendor.bundle.js:31346:13
我能够解决这个问题的唯一方法是在lineChartData中添加空对象。但这对我可以返回的数据量施加了限制。目前,我不确定需要返回多少数据,或者这是否是任意的。
有没有办法拥有一个空的初始数据集,当从服务器检索数据时填充?
当动态数据出现在"barChartData"数组中时,请使用*ngif,那么它将起作用。
<div style="display: block" *ngIf="barChartData">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>