2017-09-14 7 views
1

次のエラーがあります。TypeError:未定義の 'skip'プロパティを読み取ることができません。角のASP.NETコアChart.js値のリストをフィルタリングするときのグラフの再構築

私は自分のアプリでチャートを作成するメソッドを持っています。それが起こるのOnInit

var ctx = document.getElementById("myChart"); 
var chartInstance = new Chart(ctx); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels :this.equity, 
    datasets: [{ 
     data: this.equity 
    }] 
    } 
}); 

}

this.equityは、私は、サーバーからのデータを使用して、クライアント側の計算値の配列です。それは後でフィルタリングするリストです。

フィルタリングを開始するまで、すべてがスムーズに構築されます。チャートはリスト内の値に基づいて作成されています。私はさまざまなオプションでリストをフィルタリングするフィルタをコーディングしました。各フィルタリングの最後に、上記の方法を再度呼び出してグラフを再構築します。

ここで、奇妙なことが起こり始める。チャートは円滑に再構築されます。私はさまざまなオプションで何度もフィルターをかけ、ある時点でブームを起こしてしまいました。私がフィルターを押しているときには、特定の瞬間には発生しません。ちょうどそれが起こります。

私は新しいグラフオブジェクトを作成し、新しい値を与えるたびにそれがあると思います。値の変数は古いオブジェクトと同じで、ある時点で古いオブジェクトをチェックアウトし、古いリストと一致しない値の新しいリストをすでに持っているため、エラーが発生します。

これは誰にも当てはまりましたか?私は新しいチャートオブジェクトを作成した時点で古いチャートオブジェクトをnullにして、これでこの問題を解決することができますか?ありがとう!

答えて

1

destroy()メソッドを使用して、新しいグラフインスタンスを作成する前に、古いグラフインスタンスを破棄してみてください。

... 
if (myChart) myChart.destroy(); 
myChart = new Chart(ctx, { 
     type: 'line', 
     ... 
... 

あなたが追加したときしかし、より良い方法は、あなたのチャート内の任意のデータを更新/、update()方法を使用して、グラフを更新するだろうmyChart変数が

グローバルにアクセスであることを確認して、代わりに毎回新しいチャートのインスタンスを作成します。

+0

ありがとうございます。これは動作しているようだ。また、ページ(コンポーネント)から移動するときにグラフオブジェクトを破棄する必要があるように見えます。なぜなら、フィルタリングでエラーが発生することはなくなりますが、移動して戻ってくるとしばらくしてから表示されます。 –

+0

はい!ここまでは順調ですね。 Update()をフィルタリングし、これを使用するif(myChart)myChart.destroy(); OnInit()。 –

関連する問題