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

Posted 2023-02-16

【中文标题】如何通过 DOM 容器访问 Highcharts 图表？

【英文标题】：How can I get access to a Highcharts chart through a DOM-Container?

【发布时间】：2012-10-14 12:54:51

【问题描述】：

当我将 highcharts-chart 渲染到 div 容器时，如何通过 div-Container 访问图表对象？

我不想将图表变量设为全局变量。

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

我想像这样（伪代码）访问上述上下文之外的图表，以调用函数：

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

【参考方案1】：

@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()获取myChart，这是一个jQuery插件：

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

上面的jQuery插件方法需要在使用插件之前加载jQuery，当然插件本身也是如此。 正是由于没有这个插件，我才开始寻找替代方法来用纯原生 javascript 完成同样的任务。

通过使用纯 JS 方法，我能够做我需要的事情（第二个代码 sn-p），而无需依赖 jQuery：

【参考方案2】：

只需纯 JS：

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

【参考方案3】：

没有 jQuery（原版 js）：

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

【参考方案4】：

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

Read Mode @ Highcharts Tips - Accessing Chart Object From a Container ID

附言

自编写此答案以来，在 Highcharts 的较新版本中添加了一些内容，这些内容取自@davertron、@Moes 和 @Przy 的答案，请为他们的 cmets/answers 投票，因为他们值得称赞 对于这些。在此处添加它们，因为如果没有这些，这个已接受的答案将是不完整的

【讨论】：

看起来从 2.3.4 版开始，Highcharts 确实跟踪页面上的所有图表：api.highcharts.com/highcharts#Highcharts

@davertron 感谢更新...这是一个不错的功能，不要认为需要太多代码/努力...

+1 用于 $("#container").data('highchartsChart') 作为 highcharts 索引。很有用，谢谢！

有什么类似的方法可以用于高库存吗？

【参考方案5】：

你可以这样做

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

check example on fiddler

【讨论】：

它对我不起作用，我不得不使用@Frzy 答案。我使用的是 4.1.4 版本

不确定为什么它对你不起作用，小提琴示例使用 v4.2.3

它返回的是容器元素而不是图表，这就是@Frzy 回答有效的原因。另外，我找到了另一个解决方案：$("#testDivId").highcharts(..., function(chart) ...);

肯定是返回对象jsfiddle.net/abbasmhd/86hLvc5s点击按钮后检查控制台输出

是的，在 jsfiddle 中是这样做的，我同意。但并非每个人的工作方式都一样，正如您从@Frzy 回答的 11 个赞成票中看到的那样

【参考方案6】：

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

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

这是使用 Highcharts 3.01

【参考方案7】：

...在同事的帮助下...更好的方法是...

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

    return foundChart;

【参考方案8】：

我找到了另一种方法...主要是因为我使用的是嵌入在 OutSystems Platform 中的 Highcharts，而我无法控制图表的创建方式。

我找到的方法如下：

使用className 属性为图表指定一个标识类

chart: 
    className: 'LifeCycleMasterChart'

定义一个辅助函数，通过类名获取图表

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;

在需要的地方使用辅助功能

var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

希望对你有帮助！

【参考方案9】：

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 是全局的，因此您可以使用它来访问 de highchart 对象，这与容器无关

chart1.redraw();