我可以让我的HighChart图表显示在固定定位的jQuery对话框中,该宽度设置为百分比减去某些像素 .
但我的问题是,一旦我打开对话框,图表的宽度与我的对话框的宽度不同 . 只有在调整浏览器窗口大小后,图表才会获得与jQuery对话框窗口相同的宽度 .
在这里工作jsFiddle来表明我的意思 . 我怎么解决这个问题?
如果jsfiddle关闭,请参阅下面的“show code snippet”,但遗憾的是“运行代码片段”看起来不起作用(尽管代码与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>
1 回答
当在隐藏容器中呈现图表时,这是已知问题 . 浏览器无法计算宽度,因此图表使用图表的默认宽度/高度值 .
解决方案很简单:打开对话框时更新图表的宽度/高度 .
和演示:http://jsfiddle.net/63oa26ah/6/