2017-12-02 11 views
1

AngularJSの下でhighStockチャートを作成したいと思います。いくつかのボタンでいくつかのチャートオプションを変更したいと思います。ただし、オプションを変更してもチャートは自動的に再描画されないようです。 highChartで動作するa threadに従ってみましたが、highStockでディレクティブを動作させることはできません。ここではa plunkerですが、時計はうまく起動されていますが、グラフをうまく再描画する方法はわかりません。Angularjsの下でhighStockチャートを自動的に再描画

.directive('highchart', function($parse, $timeout) { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link: function(scope, element, attrs) { 
     var config = $parse(attrs.config)(scope); 
     Highcharts.stockChart(element[0], config); 

     scope.$watch(attrs.watch, function(newVal) { 
      if (newVal) { 
      console.log("here" + JSON.stringify(newVal)) 
      $timeout(function() { 
       Highcharts.stockChart(element[0], config); 
      }, 0); 
      } 
     }); 
     } 
    } 
    }) 

助けてもらえますか?あなたはAPIのこのセクションから機能を使用する必要が更新すでにレンダリングされたチャートの

+0

私はHighChartsに慣れていないけど、一つのことは、あなたが、これはこれはHighChartsを再描画するための正しい方法であるかどうかを確認することができますか?また、初めての設定やウォッチャーの設定は変更できません。 – Abhi

+0

Angularとは関係なく、実際にはHighChartsに関連しているように見えます。私はそれを修正しようとしたが、ここで私の変更です:https://plnkr.co/edit/VubMRQUBJXqpaHmnPq4f設定を変更して、新しい選択項目に関して、チャートをクリアしてから再描画してみてください。 – Abhi

+0

関連性があります:https://stackoverflow.com/questions/7880978/highcharts-jquery-destroy-and-rebuild-chart-with-original-options – Abhi

答えて

0

https://api.highcharts.com/class-reference/classes.listChart.update()Series.addPoint()など)。

update機能とあなたの例:https://plnkr.co/edit/X1LnekXUX0WrodQFCqMp?p=preview

$scope.chooseUnit = function (unit) { 
     $scope.chart.series[0].update({ 
     dataGrouping: { 
      units: [[unit.name, [1]]] 
     } 
     }); 
     $scope.unitSelected = unit 
    } 
+0

私はついにこれまでに動作する[highcarhts-ng](https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js)を使用しました。私はあなたのソリューションをテストするチャンスを持っていない...ありがとう... – SoftTimur

関連する問題