我的项目基于ngx-admin starter empty（没有所有库）。我在package.json中导入了 angular2-chartjs lib 。图表绘制正确。
当我收到来自服务器的响应时，我需要以异步方式更新图表数据。
我阅读了 Chart.js 的文档，该文档以以下方式报告了这种更新数据的方式：
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
但这是ChartJs，而 ngx-admin 使用angular2-chartjs。
在我的组件中，我用空数据初始化了图表：
@Component({
// tslint:disable-next-line:component-selector
selector: 'performance',
template: `
<chart type="line" [data]="data" [options]="options"></chart>
`,
styleUrls: ['./performance.component.scss'],
})
export class PerformanceComponent implements OnDestroy {
private PERFORMANCE_ENDPOINT = environment.performanceREST;
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService, private restService: TableService, http: Http) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: [],
datasets: [{
data: [],
label: '',
backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
borderColor: colors.primary,
}, {
data: [],
label: '',
backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
borderColor: colors.danger,
}, {
data: [],
label: '',
backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
borderColor: colors.info,
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
tension: 0,
fill: false,
},
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
}],
yAxes: [{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
}],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
});
// ## HERE I WOULD LIKE TO IMPLEMENT REST HTTP TO RETRIEVE DATA FROM SERVER ##
// this.restService.endPoint = this.PERFORMANCE_ENDPOINT;
// this.restService.getElements()
// .then((result) => {
// // tslint:disable-next-line:no-console
// console.log('PerformanceRESULT: ' + result);
// this.data.datasets.forEach((dataset) => {
// dataset.data.push(result);
// });
// });
}
protected addData(chart, label, data) {
this.data.labels.push(label);
this.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
// chart.update();
}
protected removeData(chart) {
this.data.labels.pop();
this.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
// chart.update();
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}
这里有人会知道建议解决我的问题吗？（一个例子表示赞赏）。
谢谢