Bri*_*ian 17 jquery-ui-tabs highcharts
有没有人一起使用了tabs(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>
再次,图表呈现,但在第二个选项卡上显示错误.
更新:我知道这个KIND OF解决了这个问题:
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event, ui) { window.location.reload(); }
});
});
但它真的很糟糕,因为每次用户点击选项卡时都必须重新加载页面.任何想法都会很棒.
Lor*_*son 12
这是我的解决方案(仅在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);
});
小智 6
为了使Highcharts在隐藏的jQuery选项卡中工作所需的修改.默认情况下,jQuery将display:none设置为隐藏选项卡,但是使用这种方法,Highcharts无法获得元素的真实宽度和高度.因此,我们绝对定位它并将其从视口移开.
<style type="text/css">
.ui-tabs .ui-tabs-hide {
position: absolute;
top: -10000px;
display: block !important;
}
</style>
添加示例:http: //www.highcharts.com/studies/jquery-ui-tabs.htm
第二个图表可能会关闭，因为听起来它在绘制时被隐藏了。尝试在选择后绘制图表。
这是一些伪代码，可以让您了解我的想象。这个没有经过测试。
$("#tabs").tabs({
select: function(event, ui) {
var chart = new Highcharts.Chart({
chart: {
renderTo: ui.panel.id,
// blah blah
}
});
}
});
| 归档时间： |
|
| 查看次数： |
22837 次 |
| 最近记录： |