我在仪表板页面中有一组称为iFrame的图表 . 在发生单击操作之前，iFrame不会显示给用户 . 因此，图表将呈现给"invisible" DIV . 在KendoUI "pane"中为每个图表分配一个DIV位置，该位置使用 inline-block 或 height: 100%; width: 100% ，以便图表填充所有分配的空间 . 一般代码如下：
<div id="top-pane" style="height: 100%; width: 100%;">
<div id="top-content-horizontal" style="height: 100%; width: 100%;">
<div id="topLeftDiv" style="height: 100%; width: 100%; text-align: center">
<div>Sme Text</div>
<div id="rangeslider" style="width: 80%;">
<input />
<input />
</div>
<label for="sizeFilterMin">Minimum Size:</label>
<input id="sizeFilterMin" value="29000" style="width: 50px; height: 20px;" />
<label for="sizeFilterMax">Max Size:</label>
<input id="sizeFilterMax" value="90000" style="width: 50px; height: 20px;" />
</div>
<div style="height: 100%; width: 100%;">
Results of filter:
<ol id="occList"style="display: inline-block;"></ol>
</div>
<div style="height: 100%; width: 100%;">
<div id="cht1" style="height: 100%; width: 100%;"></div>
</div>
</div>
</div>
<div id="mapPane" runat="server" style="height: 100%; width: 100%;">
<div id="horizontalMapPanes" style="height: 100%; width: 100%;">
<asp:PlaceHolder ID="phMap" runat="server" />
<div id="chartPane" style="height: 100%; width: 100%;">
<div id="cht2" style="height: 100%; width: 100%;"></div>
</div>
</div>
</div>
<div id="graph-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="cht3" style="display: inline-block;"></div>
<div id="cht4" style="display: inline-block;"></div>
<div id="cht5" style="display: inline-block;"></div>
</div>
</div>
我通过检查 $(window).resize() 并调用 myChart.reflow() 来处理此问题 . 这在Chrome，Safari等中运行良好 . 这个问题在IE9中发挥作用 . 图表 cht1 和 cht2 无法正确呈现 . cht1 在初始加载时确实正确呈现，但是当我更改我的尺寸过滤器并应用新数据时，图表看起来大小为600x400，而它应该只有大约300x150 . 如果我尝试调整窗口大小，它没有任何影响 . 如果我再次更改我的尺寸过滤器并加载另一组数据，那么图表的大小正确并完全填充容器窗格 .
对于 cht2 ，存在一个更大的问题 . 在初始加载时，图表会填充其容器，但图表 Headers ，导航按钮和图例项都是重叠且不可读的 . 如果我调整窗口大小，图表将填充到正确的尺寸，但文本重叠问题仍然存在 . 然后，当我触发数据更改时，图表会自行修复并正确显示 .
在这两个图表中，当我调整图表看起来“好”时调整iFrame弹出窗口的大小时，它的行为正常 .
How can I have IE9+ render the charts correctly on initial load and window resize?
我如何创建图表：
window.assetcht1 = function (seriesData, seriesCat) {
options0 = {
chart: {
renderTo: 'cht1',
type: 'bar',
spacingRight: 20,
spacingTop: 0,
spacingBottom: 15,
width: $('#cht1').width()
},
xAxis: {
type: 'category',
categories: seriesCat,
labels: {
step: 1
}
},
yAxis: {
labels: {
formatter: function () {
return '$' + this.axis.defaultLabelFormatter.call(this);
},
style: {
fontSize: '8px'
}
},
min: 0,
title: {
text: null
}
},
tooltip: {
pointFormat: '<span style="color:{series.color};white-space:normal;">{series.name}</span>: <b>{point.y}</b>
',
shared: true
},
plotOptions: {
bar: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
title: {
text: 'Historic Sizes',
style: {
color: 'grey',
fontSize: '11px'
},
y: 25
},
credits: {
text: 'Source: Size Survey'
},
legend: {
enabled: false
},
series: seriesData
};
optionscht1 = new Highcharts.Chart(options0);
};
该图表也是使用 Highcharts.themeLight 中设置的全局选项创建的，但这些全局选项不会为元素设置任何尺寸或大小;它只是颜色，字体，工具提示等 .
然后，我使用以下调用创建图表，其中 cht1seriesData 和 cht1Categories 根据范围滑块值分配：
assetchtOESWage(cht1seriesData, cht1Categories);
要处理iFrame开放（这是一个调整大小事件），当用户改变iFrame的大小时我会调用：
$(window).resize(function () {
$('#cht1').highcharts().reflow();
$('#cht2').highcharts().reflow();
$('#cht3').highcharts().reflow();
$('#cht4').highcharts().reflow();
$('#cht5').highcharts().reflow();
});
这可以工作，但在IE9中它只是不修复重叠文本 . 其他3个图表在加载，更改数据或调整窗口大小方面没有任何问题 .