如何通过DOM-Container访问Highcharts图表

Question

当我将高图表图表渲染到div容器时,如何通过div-Container访问图表对象？我不想让图表变量全局化.

        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

自从写出这个答案并从@davertron,@ Moes和@Przy的答案中获取后,在较新版本的Highcharts中进行了一些补充,请提升他们的评论/答案,因为他们应该获得这些评价.如果没有这些,那么在这里添加它们作为这个被接受的答

Answer 2

你可以这样做

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

检查fiddler的例子

Answer 3

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

chartCont是jQuery Object.chartObj是Highchart Chart Object.

这是使用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

只需使用纯JS：

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

Answer 6

没有 jQuery（香草 js）：

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