我可以让我的 HighChart 图表出现在固定位置的 jQuery 对话框中，其宽度设置为百分比减去某些像素。
但我的问题是，一旦打开对话框，图表的宽度与对话框的宽度不同。仅当我调整浏览器窗口大小后，图表的宽度才与 jQuery 对话框窗口相同。
这里是一个工作 jsFiddle来表达我的意思。 我该如何解决这个问题？
如果 jsfiddle 关闭，请参阅下面的“显示代码片段”，但不幸的是“运行代码片段”不起作用(尽管与 jsfiddle 的代码相同)。
$('.selector').dialog({
dialogClass: 'fixed-dialog',
resizable: false,
autoOpen: false,
modal: false,
clickOut: true
});
$("#opener").click(function() {
$(".selector").dialog("open");
});
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'stock-chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
xAxis: {
minPadding: 0,
maxPadding: 0
},
series: [{
data: [33, 4, 15, 6, 7, 8, 73, 2, 33, 4, 25],
marker: {
enabled: false
}
}]
});
});.fixed-dialog {
position: fixed !important;
top: 50px !important;
left: 50px !important;
width: calc(90% - 50px) !important;
}<head>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/jasonday/jQuery-UI-Dialog-extended/master/jquery.dialogOptions.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p/>
<div class="selector" title="Dialog Title">
<div id="stock-chart" style="calc(90% - 50px) !important; "></div>
</div>
<button id="opener">Open Dialog</button>
</body>最佳答案
在隐藏容器中渲染图表时，这是已知问题。浏览器无法计算宽度，因此图表使用图表的默认宽度/高度值。
解决方案很简单:打开对话框时更新图表的宽度/高度。
$('.selector').dialog({
dialogClass: 'fixed-dialog',
resizable: false,
autoOpen: false,
modal: false,
clickOut: true,
open: function(){
var chart = $("#stock-chart").highcharts();
if(chart) {
chart.reflow();
}
}
});
关于javascript - 调整窗口屏幕大小后，jQuery 对话框中嵌入的 HighChart 的宽度仅为 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31143582/