{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Lonely孤独者° 的问题《jQuery UI Tabs and Highcharts display/rendering is》','https://www.manongdao.com/q-273353.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
My code:
//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.
I had a jQuery accordion that was opening with garbled charts... this was my solution:
first is stuffed the charts in a global: window.myNamespace.charts.#{container_id}, and then in my accordion i do this:
the above is coffeescript, but it should be easy enough to translate...
basically i'm calling setSize on the chart to set it to the size it already is... this has the effect of cleaning up the chart after it opens... which i'll admit is just a workaround... ideally highcharts fixes the bug and uses the size i'm giving them instead of trying to calculate the size from a hidden element
Hi see my fiddle jsfiddle
Smaller workaround is using a static width for your charts (if you know what it should be) in CSS-
Modification needed in order to make Highcharts work in hidden jQuery tabs. By default, jQuery sets display: none to hidden tabs, but with this approach Highcharts is unable to get the true width and height of the element. So instead, we position it absolutely and move it away from the viewport.
adding example: http://www.highcharts.com/studies/jquery-ui-tabs.htm
The second chart may be off because it sounds like it is hidden when you draw it. Try to draw the chart upon selection.
Here is some pseudo code to give you an idea of what I imagine. This is not tested.
jQuery UI 1.9+ changed the way tabs are hidden, you should set your own classes when activating tabs this way:
combined with the following CSS:
This will also fix any Flash embedded object not loading properly in hidden tabs.