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

xu3bshqb  于 2022-11-10  发布在  Highcharts
关注(0)|答案(9)|浏览(172)

当我将highcharts-chart呈现到div容器中时,如何通过div容器访问图表对象?
我不想使图表变量成为全局变量。

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

我想在上面的上下文之外访问图表,就像这样(伪代码),调用函数:

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

iszxjhcz1#

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跟踪全局对象/Map中的图表

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、@Nerdroid和@Frzy的答案,请支持他们的评论/答案,因为他们值得这些内容。在此添加这些内容,因为没有这些内容,此已接受的答案将不完整

w8biq8rn

w8biq8rn2#

你可以这样做

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

check example on fiddler

5gfr0r5j

5gfr0r5j3#

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

chartCont是jQuery对象。chartObj是Highchart图表对象。
这是使用Highcharts 3.01

sqxo8psd

sqxo8psd4#

简单地用纯JS:

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

c9qzyr3d5#

我找到了另一种方法.... a.主要是因为我使用的是嵌入在OutSystems Platform中的Highcharts,而我没有办法控制图表的创建方式。
我发现的方法如下:
1.使用className属性为图表给予标识类

chart: {
    className: 'LifeCycleMasterChart'
}

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

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;

}
1.在任何需要的地方使用辅助功能

var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

希望对你有帮助!

vlju58qv

vlju58qv6#

不使用jQuery(普通js):

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

j7dteeu87#

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是全局变量,因此您可以使用它来访问highchart对象,而不管它是哪个容器

chart1.redraw();
vfwfrxfs

vfwfrxfs8#

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

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

    return foundChart;
}
qzlgjiam

qzlgjiam9#

@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

相关问题