我怎样才能访问通过DOM容器的Highcharts图表
当我向div容器渲染一个highcharts图表时,如何通过div-Container访问图表对象? 我不想让图表variables全球。
var chart = new Highcharts.Chart({ chart: { renderTo: "testDivId", ...
我想访问上面的上下文之外的图表(伪代码)来调用函数:
var chart = Highcharts.Chart("testDivId"); //access from id chart.redraw();
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"]; }
读取模式@ Highcharts提示 – 从容器ID访问图表对象
PS
自从写了这个答案以来,在较新版本的Highcharts中增加了一些内容,并且已经从@davertron,@Moes和@Przy的答案中提取出来,请大家提出他们的评论/答案,因为他们应该得到这些答案 。 在这里添加他们,因为这个被接受的答案是不完整的,
你可以这样做
var chart = $("#testDivId").highcharts();
检查小提琴手的例子
var $chartCont = $('#container').highcharts({...}), chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];
chartCont是jQuery对象。 chartObj是Highchart图表对象。
这是使用Highcharts 3.01
我发现了另外一种方法,主要是因为我使用的是embedded在OutSystems平台中的Highcharts,而我没有办法控制图表的创build方式。
我发现的方法如下:
-
使用
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;
}
-
在需要的地方使用辅助function
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
希望它可以帮助你!
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();
…在同事的帮助下…更好的方法是…
getChartReferenceByClassName(className) { var foundChart = $('.' + className + '').eq(0).parent().highcharts(); return foundChart; }