gpt4 book ai didi

jquery-ui-tabs - jQuery UI选项卡和Highcharts显示/渲染问题

转载 作者:行者123 更新时间:2023-12-03 13:55:24 28 4
gpt4 key购买 nike

有人曾经一起使用jquery-ui-1.8.9中的选项卡(Highcharts 2.1.4)和饼图吗?简而言之,我有多个选项卡,其中每个选项卡均显示具有不同数据的饼图。图表确实会渲染到div,但是当我单击第二个选项卡时,图表会以某种方式在应该显示的位置右侧显示300px。每当我放大或缩小浏览器窗口时,图表都会返回到更正位置。

我的代码:

//假设数字标签是根据变量$ count生成的,并且有2个标签

<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>


再次,图表呈现,但在第二个选项卡上显示错误。

更新:我知道这种解决方法可以解决此问题:

<script type="text/javascript"> 
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event, ui) { window.location.reload(); }
});
});


但这确实很糟糕,因为每次用户单击选项卡时都必须重新加载页面。任何想法都很棒。

最佳答案

这是我的解决方案(仅在Safari和Firefox中经过测试)。如果要将图表加载到宽度灵活的页面上的隐藏选项卡中,此方法非常有用。如果调整了浏览器窗口的大小,则图表也会调整大小。

在图表设置中,从页面加载时打开的标签中设置图表的宽度(使用jQuery获取宽度):

   var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
width: $('#tab-1').width()
},
....


如果调整浏览器窗口的大小,以下功能将调整宽度。高度是500。如果未在图表选项中指定宽度,则会自动完成此操作。

$(window).resize(function() {
chart.setSize($('#chart_tab').width(),500);
});

关于jquery-ui-tabs - jQuery UI选项卡和Highcharts显示/渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5688069/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com