最初の値が追加されたのは、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を（）を意味し、どのトリック

を実行する必要があります。acutally、スーパー奇妙な、しかし、おかげで動作します

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を行い、元の変数にデータを再割り当てして、変更が認識されるようにする必要があります。