2

最近、jquery で厳密に動作するハイチャートのプロトタイプを作成しました。大量のスパゲッティ コードがありましたが、グラフをアニメーション化して系列を更新するコントローラーを選択する際の遷移アニメーションも優れていました。要するに、それはそのように行われました...

var chart = new Highcharts.Chart(chartOptions);
// ...
$('select#dropdown').change(function(){
  // ...
  chart.series[0].setData(/*data*/, false);
  chart.series[1].setData(/*data*/, false);
  chart.series[2].setData(/*data*/, false);
  // ...
  chart.redraw();
}

したがって、グラフは (1) ページの読み込み時に初期化され、(2) ドロップダウン ボックスから引数を取得し、(3) 特定の系列の新しい値を決定し、(4) グラフをその値にスムーズに再描画します。

私の問題は、これを角度で再​​現するのに非常に苦労していることです。特にhighcharts-ngは、既存のポイントを更新することを除いて、太陽の下ですべての例を持っているようです.

http://pablojim.github.io/highcharts-ng/examples/example.html

シリーズの追加、シリーズの削除などがあります。シリーズの更新はどうですか？絶えず変化するスコープ変数にシリーズを関連付けたい場合はどうなるでしょうか? ドロップダウン ボックスの $scope.$watch を作成して、グラフにポイントを更新するように指示するにはどうすればよいですか?

4

1 に答える 1

1

重要なのは、一連のデータ配列を更新することであり、ハイチャートがスムーズな移行を処理します。例えば：

 $scope.chartConfig.series[0].data = rnd;

ここで、スムーズな更新遷移を示すために例を更新しました: JsFiddle

そして、ドロップダウンとウォッチの例: JsFiddle

それが役立つことを願っています。操作方法についてご不明な点がございましたら、お知らせください。

于 2014-04-04T17:46:55.333 に答える