web-dev-qa-db-ja.com

DOM-ContainerからHighchartsチャートにアクセスするにはどうすればよいですか

Highcharts-chartをdivコンテナーにレンダリングする場合、div-Containerを介してチャートオブジェクトにアクセスするにはどうすればよいですか？チャート変数をグローバルにしたくありません。

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

関数を呼び出すために、上記のコンテキスト以外のチャート（擬似コード）にアクセスしたい：

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

ハイチャート3.0.1

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

var chart=$("#container").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"];
}

読み取りモード@ Highchartsのヒント-コンテナーIDからチャートオブジェクトへのアクセス

追伸.

この回答を書いてからHighchartsの新しいバージョンでいくつかの追加が行われ、@ davertron、@ Moes、および@Przyからの回答から取得されました。 これらについて。この承認済み回答がこれらなしでは不完全であるため、ここに追加します

136
Jugal Thakkar

あなたはこれを行うことができます

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

フィドラーの例を確認

44
Moes
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartContはjQueryオブジェクトです。 chartObjはHighchart Chartオブジェクトです。

これはHighcharts 3.01を使用しています

22
Frzy

私はそれを行う別の方法を見つけました...主にOutSystems Platformに埋め込まれているHighchartsを使用しているため、チャートの作成方法を制御する方法がありません。

私が見つけた方法は次のとおりでした：

  1. className属性を使用して、識別クラスをチャートに与えます

    chart: {
    className: 'LifeCycleMasterChart'
}

  2. クラス名でチャートを取得するための補助関数を定義する

    function getChartReferenceByClassName(className) {
var cssClassName = className;
var foundChart = null;

$(Highcharts.charts).each(function(i,chart){    
    if(chart.container.classList.contains(cssClassName)){
        foundChart = chart;
        return;
    }
});

return foundChart;

    }

  3. 必要な場所で補助機能を使用する

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

それがあなたを助けることを願っています！

7
Pedro Cardoso

純粋なJSの場合：

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
6
elo
var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

Var chart1はグローバルなので、コンテナであるかどうかに関係なく、ハイチャートオブジェクトにアクセスするために使用できます。

chart1.redraw();
4
manuerumx

...そして同僚の助けを借りて...それを行うより良い方法は...

getChartReferenceByClassName(className) {
    var foundChart = $('.' + className + '').eq(0).parent().highcharts();

    return foundChart;
}
2
Pedro Cardoso

JQueryなし（Vanilla js）：

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
2
Tauka Kunzhol

@ eloの答えは正解であり、賛成ですが、より明確にするために少し整理する必要がありました。

const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];

myChartは、ライブになりますHighchartsmyChartElでレンダリングされるチャートに存在する現在のすべての小道具を公開するオブジェクト。 myChartはHighchartsオブジェクトであるため、その直後にプロトタイプメソッドをチェーン、拡張、または参照できます。

myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);

myChartプラグインである.highcharts()を介してjQueryを取得することもできます。

var myChart = $("#the-id-name").highcharts();

上記のjQuery pluginアプローチでは、プラグインを使用する前にjQueryをロードする必要があり、もちろんプラグイン自体もロードします。 このプラグインがなかったため、純粋なバニラJavaScriptで同じことを実現する代替方法を模索するようになりました。

純粋なJSアプローチを使用することで、jQueryに依存することなく、必要なこと（2番目のコードスニペット）を実行できました：

0
Wallace Sidhrée