如何通过 DOM 容器访问 Highcharts 图表？

Question

在将Highcharts图表呈现到

容器中时，如何通过该

容器访问图表对象？我不想将图表变量设为全局变量。

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

我希望能够在上下文之外访问图表，如下所示（伪代码），以调用函数：

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

- Manuel

Answer 1

Highcharts 3.0.1

用户可以使用Highcharts插件。

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

Highcharts 2.3.4

如果是2.3.4版本或更高版本，可以从<div>的数据中找到图表的索引。可以从Highcharts.charts数组中读取。

 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 访问图表对象

P.S.

自从编写这个答案以来，Highcharts 的较新版本中添加了一些内容，这些内容已被 从 @davertron, @Nerdroid 和@Frzy 的回答和评论中获取，并因为他们的贡献得到了相应的点赞。将它们添加在这里，因为没有这些内容，这个答案就不完整。

- Jugal Thakkar

---

根据 Highcharts 的官方文档 http://api.highcharts.com/highcharts#Highcharts，从 2.3.4 版本开始，Highcharts 可以跟踪页面上的所有图表。 - davertron

@davertron 感谢更新...这是一个很好的功能，我认为不需要太多的代码/努力就可以实现... - Jugal Thakkar

+1 表示 $("#container").data('highchartsChart') 是 highcharts 的索引。非常有用，谢谢！ - Shahar

有没有类似的方法可以用于Highstock？ - tnkh

Answer 2

你可以做到这件事

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

点击此处查看fiddler上的示例

- Nerdroid

---

它对我没用，我不得不使用@Frzy的答案。我正在使用4.1.4版本。 - David Torres

不确定为什么对你没用，这个示例使用的是v4.2.3。 - Nerdroid

它返回的是容器元素而不是图表，这就是为什么@Frzy的答案有效的原因。另外，我发现了另一种解决方案：$("#testDivId").highcharts({...}, function(chart) {...}); - David Torres

点击按钮后，一定会返回对象。请查看此链接 http://jsfiddle.net/abbasmhd/86hLvc5s/ 并检查控制台输出。 - Nerdroid

是的，在 jsfiddle 上是这样做的，我同意。但并不是每个人都能做到相同的效果，正如您可以从 @Frzy 回答的 11 个赞数看出来的那样。 - David Torres

Answer 3

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

chartCont是jQuery对象。

chartObj是Highcharts图表对象。

这里使用的是Highcharts 3.01版本。

- Frzy

Answer 4

只需使用纯JS：

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

- elo

Answer 5

我发现了另一种方法...主要是因为我正在使用嵌入OutSystems平台中的Highcharts，并且我没有办法控制图表创建的方式。

我找到的方法如下：

1. Give an identifying class to the chart using className attribute

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. Define an auxiliary function to get the chart by class name

   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. Use the auxiliary function wherever you need it

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

希望这能对您有所帮助！

- Pedro Cardoso

Answer 6

不使用jQuery（纯JS）:

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

- Tauka Kunzhol

Answer 7

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是全局的，所以您可以使用它来访问高级图表对象，无论容器是什么。

chart1.redraw();

- manuerumx

Answer 8

...并且在同事的帮助下...更好的做法是...

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

    return foundChart;
}

- Pedro Cardoso

Answer 9

@elo的答案是正确且受到赞同的，尽管我必须稍微整理一下以使其更清晰：

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

myChart 然后变成了一个实时的 Highcharts 对象，该对象公开了渲染在 myChartEl 中的图表中存在的所有当前属性。由于 myChart 是一个 Highcharts 对象，因此可以在其后立即链接原型方法、扩展它或引用它。

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

通过 .highcharts()，也可以使用 jQuery 插件获取 myChart：

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

上述的 jQuery 插件 方法需要在使用插件之前加载 jQuery，当然还需要加载插件本身。 正是由于没有这个插件，我开始寻找使用纯原生 JavaScript 实现相同功能的替代方法。 < p >通过使用纯 JS 方法，我能够完成我所需的操作（第二段代码片段），而无需依赖于 jQuery：

- Wallace Sidhrée