设置chart.js动态堆叠条形图数据

Question

我的堆叠条形图看起来像下面

<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>

我看到过替换特定数据数组的示例。这对我也有效。然而，在我的情况下，我想替换整个数据集。它在我的代码中的样子是：

this.barChartData = [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]
this.chart.chart.data.datasets = this.barChartData
this.chart.chart.data.labels = ["session1","session2","session3", "session4"]
this.chart.chart.update()

然而，这是行不通的。而chart根本没有呈现上述数据。

此外，如果我像下面这样在初始化时放入相同的数据，那么它就可以正常工作。所以这不是数据的问题。

import { BaseChartDirective } from 'ng2-charts'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
};
public barChartLabels:string[] = ["session1", "session2", "session3", "session4"];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]

旧数据：

public barChartData:any[] = [{data:[0,0,0,0],label:"dialog"},
{data:[0,0,0,0],label:"AtkBBBFuseFeedsFrontPage"},
{data:[0,0,0,0],label:"SandboxHover"},
{data:[0,0,0,0],label:"ManageSandboxes"}]

新数据

this.barChartData =  [{"data":[3,0,0,0],"label":"dialog"},{"data":[16199,0,0,0],"label":"AtkBBBFuseFeedsFrontPage"},{"data":[52799,0,0,0],"label":"SandboxHover"},{"data":[11343,0,0,0],"label":"ManageSandboxes"}]

Answer 1

我认为它正在工作，但您没有看到更改，因为您以前的数据和更改后的数据完全相同。因此，它没有更新。我运行了你的代码，它正在运行。

html：我创建了一个额外的按钮来更改数据。

<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
<button (click)="changeData()">CLICK</button>

ts文件：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp';
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
};
public barChartLabels: string[] = ["session1", "session2", "session3", "session4"];
public barChartType: string = 'bar';
public barChartLegend: boolean = true;
public barChartData: 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'}];
public changeData(): any{
this.barChartData = [
{data: [10, 2, 80, 81, 36, 55, 40], label: 'Series D'},
{data: [28, 87, 40, 19, 67, 27, 9], label: 'Series E'},
{data: [18, 48, 66, 9, 58, 27, 40], label: 'Series F'}
];
}
}

我的代码运行得很好。