有没有人尝试在类选择器而不是 id 选择器上运行高图表 reflow() 函数?
请参阅示例,其中我有 2 个带有 1 个按钮的图表来切换其包含的 div 大小。我还有另外 2 个按钮,一个用于按 id 重排图表,另一个按类别重排图表。
请注意,使用类选择器的那个似乎不会重排两个图表,并且它只重排使用该类的第一个元素。
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();
});
});