我怎样才能通过DOM容器可以访问一个Highcharts图(How can i get access

当我渲染highcharts，图表，一个div容器，我怎么能得到通过DIV容器访问图表对象？ 我不想使图表变量全球。

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

我要访问的图表上下文之外上述这样的（伪代码），调用的功能：

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

Answer 1:

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"];
}

阅读模式@ Highcharts提示-访问图表对象从容器ID

PS

有些添加剂在Highcharts的新版本，因为写这个答案作了并且从@davertron，@Moes和@Przy答案已经采取了，请给予好评他们的意见/答案，因为他们应有的荣誉这些。 在这里添加它们，因为这接受的答案是没有这些不完整

Answer 2:

你可以这样做

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

检查提琴手例子

Answer 3:

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

chartCont是jQuery对象。 chartObj是Highchart图表对象。

这是使用Highcharts 3.01

Answer 4:

我发现，这样做的另一种方式...主要是因为我使用的是嵌入在OutSystems平台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'); 

希望它可以帮助你！

Answer 5:

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]
         }]
      });
   });

该变种chart1是全球性的，所以你可以用它来访问德highchart对象并不重要至极的容器

chart1.redraw();

Answer 6:

只需使用纯JS：

 var obj=document.getElementById('#container') Highcharts.charts[obj.getAttribute('data-highcharts-chart')]; 

Answer 7:

...并与同事...一个更好的方式来做到这一点是的帮助...

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

    return foundChart;
}

Answer 8:

如果没有的jQuery（香草JS）：

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

文章来源: How can i get access to a Highcharts chart through a DOM-Container