只有第一个值才会显示在ng2-chart线图中

Question

我有一个非常简单的折线图，我想在用户点击按钮时添加值。但无论出于何种原因，只有第一个增加的值（在初始值之后）才会显示，之后的所有值都会被削减。

我知道this very similar issue但我已经使用了标签，但它仍然无法正常使用。

我已经提出问题的plunkr版本，但这里基本上是我的代码：

模板：

<div style="display: block">
    <canvas baseChart
            [options]="chartOptions"
            [data]="chartData"
            [labels]="chartLabels"
            [chartType]="chartType"></canvas>
</div>

<button (click)="addRandomValue()">Add Random value</button>

组件：

export class ChartComponent implements OnInit {
    public chartType: string;

    public chartData: number[];
    public chartLabels: string[];

    public chartOptions: any = {
        responsive: true,
        maintainAspectRatio: false
    };

    ngOnInit(): void {
        this.chartType = 'line';
        this.chartLabels = [ '1', '2', '3' ];
        this.chartData = [ 0, 10, 20 ];
    }

    addRandomValue(): void {
        this.chartData.push(Math.random() * 10 + 10);
        this.chartLabels.push(this.chartData.length + '');

        // weird workaround for refreshing data, works fine
        // for all other chart types I tried it on
        this.chartData = this.chartData.slice();
        this.chartLabels = this.chartLabels.slice();
    }
}

这是某种错误还是有人知道如何解决这个问题？

Answer 1

删除标签的切片，这应该是技巧

这意味着你的addRandomValue（）应如下所示：

addRandomValue(): void {
    this.chartData.push(Math.random() * 10 + 10);
    this.chartLabels.push(this.chartData.length + '');

    // weird workaround for refreshing data, works fine
    // for all other chart types I tried it on
    this.chartData = this.chartData.slice();
}

Answer 2

这是一个有点已知的问题。如果您查看ng2-chart的示例，您会注意到条形图（https://github.com/valor-software/ng2-charts/blob/master/demo/src/app/components/charts/bar-chart-demo.ts）声明下面的注释。

简而言之，您必须克隆数据，在克隆上完成CRUD，并将数据重新分配给原始变量，以便识别更改。