87

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

我不想让图表变量成为全局变量。

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

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

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

9 回答 9

144

海图 3.0.1

用户可以使用 highcharts 插件

var chart=$("#container").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 访问图表对象

附言

自编写此答案以来，在 Highcharts 的较新版本中添加了一些内容，这些内容取自 @davertron、@Moes 和 @Przy 的答案，请为他们的评论/答案投票，因为他们应该得到这些荣誉。在此处添加它们，因为如果没有这些，这个公认的答案将是不完整的

于 2012-10-24T14:55:31.947 回答
45

你可以这样做

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

检查提琴手的例子

于 2013-04-15T04:57:34.620 回答
22 
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

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

这是使用 Highcharts 3.01

于 2013-05-03T22:33:54.603 回答
10

只需使用纯 JS ：

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
于 2018-01-10T22:11:49.330 回答
9

我找到了另一种方法......主要是因为我使用的是嵌入在 OutSystems Platform 中的 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');

希望对你有帮助！

于 2013-07-19T11:09:51.017 回答
5

没有 jQuery（香草 js）：

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
于 2018-01-05T10:37:47.250 回答
4 
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();
于 2012-10-24T13:41:12.550 回答
2

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

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

    return foundChart;
}
于 2013-07-19T13:50:35.787 回答
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);

也可以myChart通过.highcharts()，这是一个jQuery插件：

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

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

通过使用纯 JS 方法，我能够做我需要的事情（第二个代码片段），而不必依赖jQuery：

于 2019-08-22T21:29:38.540 回答