1. ホーム
  2. javascript

[解決済み] DOM-Containerを通してHighchartsのチャートにアクセスするにはどうしたらいいですか?

2023-05-17 23:44:25

質問

highcharts-chartをdivコンテナにレンダリングするとき、divコンテナを通してチャートオブジェクトにアクセスするにはどうしたらいいですか?

チャート変数をグローバルにしたくないのですが。

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: "testDivId",
                                ...

このように上のコンテキストの外側でチャートにアクセスして(疑似コード)、関数を呼び出したいのです。

var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();

どのように解決するのですか?

Highcharts 3.0.1

ユーザーはhighchartsプラグインを使用することができます

var chart=$("#container").highcharts();

Highcharts 2.3.4

からの読み込み Highcharts.charts の配列から読み取ります。バージョン 2.3.4 以降では、チャートのインデックスを <div>

 var index=$("#container").data('highchartsChart');
 var chart=Highcharts.charts[index];

すべてのバージョン

コンテナIDによるグローバルオブジェクト/マップでのチャート追跡

var window.charts={}; 
function foo(){
  new Highcharts.Chart({...},function(chart){  
      window.charts[chart.options.chart.renderTo] = chart;
  });
}

function bar(){
  var chart=window.charts["containerId"];
}

Read Mode @ Highcharts Tips - コンテナIDからチャートオブジェクトにアクセスする。

追伸

この回答を書いてから、Highchartsの新しいバージョンでいくつかの追加が行われ、以下のようになりました。 dvertron、@Moes、および@Przyの回答から引用しており、彼らは称賛に値するので、彼らのコメントや回答をアップヴォートしてください。 です。この受け入れられた回答は、これらなしでは不完全なものとなってしまうので、ここにそれらを追加します。