有没有人尝试在类选择器而不是id选择器上运行High charts reflow()函数?
参见示例,其中我有2个图表,其中包含1个按钮,可以切换其包含的div大小。 我有另外两个按钮,一个用于按照id重排图表,另一个用于按类重排图表。
请注意,使用类选择器的人似乎不会重排BOTH图表,并且它只使用该类重排第一个元素。
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div style="width: 600px">
<div id="container1" class="needreflow" style="width: 400px; height: 300px; margin: 1em; border: 1px solid gray"></div>
<div id="container2" class="needreflow" style="width: 400px; height: 300px; margin: 1em; border: 1px solid gray"></div>
</div>
<button id="set-div-size" class="autocompare">Toggle container size</button>
<button id="reflow-chart-byid" class="autocompare">Reflow charts by id selector</button>
<button id="reflow-chart-byclass" class="autocompare">Reflow charts by class selector</button>
JS:
$(function () {
$('#container1').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}]
});
$('#container2').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}]
});
var wide = false;
$('#set-div-size').click(function () {
$('#container1').width(wide ? 400 : 500);
$('#container2').width(wide ? 400 : 500);
wide = !wide;
});
$('#reflow-chart-byid').click(function () {
$('#container1').highcharts().reflow();
$('#container2').highcharts().reflow();
});
$('#reflow-chart-byclass').click(function () {
$('.needreflow').highcharts().reflow();
});
});
答案 0 :(得分:3)
这是一个很好的观察,我相信它归结为.highcharts()
函数的实现方式。如所观察到的,它不会影响具有类选择器的多个元素,因为它仅适用于单个元素。
如果你在函数中查看the source code(第971-1005行),你可以看到这是代码:
/**
* Register Highcharts as a plugin in the respective framework
*/
$.fn.highcharts = function () {
...
// When called without parameters or with the return argument, get a predefined chart
if (options === UNDEFINED) {
ret = charts[attr(this[0], 'data-highcharts-chart')];
}
...
return ret;
}
返回值始终为this[0]
,这意味着无论选择多少元素,它都将返回第一个元素,并且根本不处理多个元素。
reflow
也只会执行一次,因为highcharts
- 函数不会返回reflow
- 函数可以操作的列表。如果确实如此,我猜测reflow
函数也不支持多个元素。
一个解决方案可能是使用.each
来迭代您使用选择器找到的每个容器,就像这样(JSFiddle):
$('.needreflow').each(function() { $(this).highcharts().reflow(); });