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

将highcharts图表呈现给div容器时，如何通过div容器访问图表对象

我不想使图表变量成为全局变量

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

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

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

var chart1是全局的，因此您可以使用它访问de highchart对象，而不管容器是什么

chart1.redraw();

海图3.0.1 用户可以使用highcharts插件

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

图表2.3.4 从数组中读取，对于2.3.4版和更高版本，可以从

所有版本 按容器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的新版本中增加了一些内容，这些内容摘自@davertron、@Moes和@Przy的答案，请更新他们的评论/答案，因为他们值得表扬。如果没有这些，将它们添加到此处作为此已接受答案是不完整的

您可以这样做

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

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

---

这是在使用Highcharts 3.01，我找到了另一种方法。。。主要是因为我使用的是嵌入OutSystems平台的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');

---

希望它能帮助你

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

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

    return foundChart;
}

没有jQuery（香草js）：

let chartDom=document.getElementById（“testDivId”）；
让chart=Highcharts.charts[Highcharts.attr（chartDom，'data Highcharts chart'）]

只需使用纯JS即可：

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

---

@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方法，我可以做我需要的事情（第二个代码片段），而不必依赖于

jQuery

：

看起来从2.3.4版开始，Highcharts确实可以跟踪页面上的所有图表：@davertron感谢更新。。。这是一个很好的特性，不需要太多的代码/努力就可以将这个…+1美元（“#container”）.data（'highchartsChart'）作为highcharts索引。非常有用，谢谢！对于highstock，我可以使用任何类似的方法吗？它对我不起作用，我必须使用@Frzy答案。我使用的是4.1.4版不确定为什么它不适用于您fiddle示例使用的是v4.2.3版，它返回的是容器元素而不是图表，这就是@Frzy answer起作用的原因。此外，我还找到了另一个解决方案：

$（“#testDivId”）.highcharts（{…}，函数（chart）{…}）它肯定会返回对象，单击按钮后检查控制台输出，在JSFIDLE中就是这样做的，我同意。但并不是每个人的工作方式都是一样的，你可以从@Frzy答案的11票投票中看到
const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];

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

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