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

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

P.S。

自从写了这个答案并且已经从@davertron，@ Mooes和@Przy的答案中取得了一些新增的Highcharts后，请提出他们的评论/答案，因为他们应得的信用对于这些。如果没有这些

，那么在此处添加它们将是不完整的

Answer 2

你可以这样做

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

check example on 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，而我无法控制图表的创建方式。

我找到的方法如下：

使用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');

希望它可以帮到你！

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

var chart1是全局的，因此您可以使用访问de highchart对象无关紧要

chart1.redraw();

Answer 6

只需使用纯JS：

＆＃13;

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

＆＃13;

Answer 7

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

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

    return foundChart;
}

Answer 8

没有jQuery（vanilla js）：

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

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

也可以通过myChart（这是一个.highcharts()插件）来获得jQuery：

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

上述 jQuery插件方法要求在使用插件之前先加载jQuery，当然，插件本身也要加载。 正是由于缺少此插件，我才开始寻找其他方法来使用纯净的JavaScript实现相同的功能。

通过使用纯JS方法，我无需依靠jQuery 即可完成所需的工作（第二个代码段）：

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

9 个答案:

Highcharts 3.0.1

Highcharts 2.3.4

所有版本

P.S。