2016-10-27 8 views
0

HighChartを使用するAngularJSアプリケーションがありますが、ハイチャートはありません。私はこのGitHub discussionから来たJSFiddleに似たエクスポート機能を実装しました。最初のエクスポート後にハイチャートのエクスポートが機能しなくなる

ロード後、エクスポートは正確に1回のみ実行されます。その後のエクスポートでは、TypeError: Cannot read property 'exporting' of undefinedというエラーが発生します。

興味深いことに、JSFiddleと実装の両方で同じ動作が観察されることがあります。

私はチャートオプションのプロパティのエクスポートを指していると考えています。 1回のエクスポート後にオプションが未定義になるのはなぜですか?

答えて

0

exportChart()メソッドは、グラフでなければならないコンテキストを失いますが、実際に最初のエクスポート後には、プロパティを持たない削除されたチャートであるため、オプションはありません。

グラフがロードされると、コールバックは、コンテキストのレンダリンググラフと結合さchartExport()の上記コールバックで

func: function (chart) { 
      $scope.chartExport = $.proxy(chart.exportChart, chart); 
     } 

呼び出される - 最初のエクスポートのために微細です。

最初のエクスポートが進行しているときに、元のグラフのオプションと新しいオプションがマージされた新しい一時的なグラフが作成されます。 chartConfigからのコールバックがもう一度呼び出され、今すぐ$scope.chartExport()は、エクスポートが終了した直後に破棄される一時的なチャートにバインドされます。

イベントをロードするためにコールバックを移動し、エクスポートオプションで[in]を上書きすると、chartExport()のコンテキストは変更されません。

options: { 
     chart: { 
      type: 'bar', 
      events: { 
       load: function() { 
       $scope.chartExport = $.proxy(this.exportChart, this); 
       } 
      } 
     } 
    }, 

... 

$scope.svgExport = function() { 
    $scope.chartExport({type: 'image/svg+xml', filename: 'my-svg'}, { 
     chart: {events: {load: function() {} }}, 
     subtitle: {text:''}}); 
} 

例:http://jsfiddle.net/a9cse5pt/18/

+1

私はあなたの答えを受け入れてきました。しかし、私は(私のように思える)簡単な解決策を見つけました。私は、チャートオブジェクトを 'var chart = $("#group-chart ")、highcharts();そして' exportChart() 'を呼び出して、これもうまくいきます。 – WiSeeker

+0

それもそれを解決します。重要なことは、exportChart()のコンテキストです。ページからすべてのチャートを保存するHighcharts.chartsグローバル配列からチャートを取得することもできます。 – morganfree

関連する問題