jQuery UI选项卡和Highcharts显示/呈现问题 [英] jQuery UI Tabs and Highcharts display/rendering issue
问题描述
任何人都使用过标签（ jquery-ui-1.8.9 ）和来自 Highcharts 2.1.4 在一起？简而言之，我有多个选项卡，其中每个选项卡显示具有不同数据的饼图。图表呈现给div，但是当我点击第二个选项卡时，图表以某种方式在其假定的位置右侧显示 300px 。无论何时放大或缩小浏览器窗口，图表都会返回到更正位置。
Anyone ever used the tabs (jquery-ui-1.8.9) and pie charts from Highcharts 2.1.4 together? To put it simply, I have multiple tabs, where each tab shows a pie chart with different data. The charts DO render to the divs, but when I click on the 2nd tab, the chart somehow shows up 300px to the right of where it's suppose to be. Whenever I zoom in or out of the browser window, the chart goes back to the correction position.
我的代码：
//假设数字选项卡是基于变量$ count生成的，并且有2个选项卡
//Suppose the number tabs are generated based on variable $count, and there are 2 tabs
<script type="text/javascript">
var chart_tab_<?=count?>;
$(document).ready(function() {
chart_tab_<?=count?> = new Highcharts.Chart({
chart: {
renderTo: 'chart_tab_<?=count?>',
// blah blah
}
<body>
<div id="chart_tab_<?=count?>"></div>
</body>
再次，图表呈现，但在第二个选项卡上，显示器被窃听。
Again, the chart renders, but on the 2nd tab the display is bugged.
更新：我知道这种类型的问题解决了问题：
Update: I know that this KIND OF fixes the problem:
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event, ui) { window.location.reload(); }
});
});
但是这真的很糟糕，因为每次用户点击标签时都必须重新加载页面。任何想法都会很棒。
But it's really crappy because the page has to be reloaded every time a user clicks on the tab. Any ideas would be great.
推荐答案
这是我的解决方案（只在Safari和Firefox中测试过）。如果要将图表加载到具有灵活宽度的页面上的隐藏选项卡，它会很好用。如果浏览器窗口调整大小，图表会调整大小。
This is my solution (only tested in Safari and Firefox). It works great if you want to load the chart into a hidden tab on a page with flexible width. The chart resize if the browser window is resized.
在图表设置中，从页面加载时打开的选项卡中设置图表的宽度（使用jQuery获取宽度）：
In the chart settings, set the width of the chart from the tab that opens on page load (using jQuery to get the width):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
width: $('#tab-1').width()
},
....
如果浏览器窗口被调整大小，以下函数调整宽度：500是高度，如果宽度为没有在图表选项中指定。
The following function adjusts width if the browser window is resized. 500 is the height. This is done automatically if the width is not specified in the chart options.
$(window).resize(function() {
chart.setSize($('#chart_tab').width(),500);
});
这篇关于jQuery UI选项卡和Highcharts显示/呈现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
