87

highcharts-chartをdivコンテナーにレンダリングする場合、div-Containerを介してチャートオブジェクトにアクセスするにはどうすればよいですか？

チャート変数をグローバルにしたくありません。

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

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

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

9 に答える 9

144

ハイチャート 3.0.1

ユーザーはハイチャートプラグインを使用できます

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

ハイチャート2.3.4

バージョン 2.3.4 以降では、 Highcharts.charts配列から読み取ります。チャートのインデックスは、<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"];
}

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

PS

この回答を書いてから新しいバージョンの Highcharts にいくつかの追加が行われ、@davertron、@Moes、および @Przy からの回答から取得されました。コメント/回答に賛成票を投じてください。この受け入れられた回答は、これらがないと不完全になるため、ここに追加します

于 2012-10-24T14:55:31.947 に答える
45

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

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

フィドラーの例を確認してください

于 2013-04-15T04:57:34.620 に答える
22 
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont は jQuery オブジェクトです。chartObj は Highchart チャート オブジェクトです。

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

于 2013-05-03T22:33:54.603 に答える
10

単純に純粋な JS で:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
于 2018-01-10T22:11:49.330 に答える
9

別の方法を見つけました... 主に、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');

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

于 2013-07-19T11:09:51.017 に答える
5

jQuery なし (バニラ js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
于 2018-01-05T10:37:47.250 に答える
4 
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();
于 2012-10-24T13:41:12.550 に答える