时，只需致电
的方法
html：
<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文件中，我有带有数据和选项的变量。然后，我调用一种更新lineactionData的方法。我已经搜索了互联网，但尚未找到如何更新/重新绘制图表。如果我使用按钮更改图表的类型(即从线到bar，再到线路再到线(，则图表将用新数据重新绘制。但是如何在更新数据变量的值后如何直接进行操作呢？我发现的所有方法都不适合我的解决方案。thx寻求帮助
请遵循此操作，它将起作用！
1(导入这些...
import { Component, OnInit, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
2(进入导出类(在您的TS文件中(添加此...
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
然后，首先，您应该初始化包含数据和标签信息的对象。1、1、1是一个示例，您可以使用0(如果需要...
(public barChartData: any[] = [{
data: [1,1,1,1,1,1,1],
label: 'this is an example'
}];
3(在您的ngoninit方法中，添加settimeout函数，或使用http;
的后端调用呼叫setTimeout(() => {
this.chart.chart.data.datasets[0].data = [55, 355, 35, 50, 50, 60, 10]
this.chart.chart.update()
}, 2000);
4(在您的HTML文件中，请确保将Basechart添加到画布标签
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
[colors]="chartColors"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
5(仅在ngoninit方法中进行更多探索，您可以执行(this.chart.chart(的控制台。您将找到有关对象的更多信息...
希望它有帮助！
您可以通过ViewChild绑定图表指令：
...
export class HomeComponent {
@ViewChild(BaseChartDirective)
public chart: BaseChartDirective; // Now you can reference your chart via `this.chart`
void updateChart() {
this.chart.chart.update(); // This re-renders the canvas element.
}
每当您的数据集更改以使图表保持最新！
updateChart@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;
...
this.chart.chart.update();
使用contjs的update()
这是解决方案，在更新数据之后，简单barchartdata = null和barchartdata ="新数据"。
<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>
这就是组件中的一个错误。您遵循此路径NG2-charts/Charts/Charts.js，并自己更改。参考(https://github.com/valor-software/ng2-charts/issues/614(
BaseChartDirective.prototype.ngOnChanges = function (changes) {
if (this.initFlag) {
// Check if the changes are in the data or datasets
if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
if (changes['data']) {
this.updateChartData(changes['data'].currentValue);
}
else {
this.updateChartData(changes['datasets'].currentValue);
}
// add label change detection every time
if (changes['labels']) {
if (this.chart && this.chart.data && this.chart.data.labels) {
this.chart.data.labels = changes['labels'].currentValue;
}
}
this.chart.update();
}
else {
// otherwise rebuild the chart
this.refresh();
}
}};
尝试此
public lineChartData:Array<any> = [];
setTimeout(() => {
this.lineChartData= [
{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'},
];
}, 0)