Jquery ui JQuery UI选项卡和多个Highcharts_Jquery Ui_Highcharts

Jquery ui JQuery UI选项卡和多个Highcharts

jquery-ui highcharts

Jquery ui JQuery UI选项卡和多个Highcharts,jquery-ui,highcharts,Jquery Ui,Highcharts,我很难将多个highcharts绑定到jQueryUI选项卡中。将加载第一个选项卡内容，但不会显示其他两个选项卡内容 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Main</title> <link href="/test/css/redmond/jquery-ui-1.10.2.custom.css" rel="sty

我很难将多个highcharts绑定到jQueryUI选项卡中。将加载第一个选项卡内容，但不会显示其他两个选项卡内容

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Main</title>
<link href="/test/css/redmond/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css"/>
<script src="/test/js/jquery-1.9.0.min.js"></script>
<script src="/test/js/jquery-ui-1.10.2.custom.min.js"></script>

<script>
$(function() {
   $("#tabs").tabs();
});
</script>

</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="/test/tag_1.php">Tag</a></li>
        <li><a href="/test/monat_1.php">Monat</a></li>
        <li><a href="/test/jahr_1.php">Jahr</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>
</body>
</html>


主要
$（函数（）{
$（“#制表符”）.tabs（）；
});

你可以叫它。萤火虫说高图表错误#16-->

所以，我知道问题是什么，但我不知道如何解决它

请给我一个提示

致意安迪





aaaa
bbbb
ccc

再次抱歉，我还没有有效的解决方案。第一个选项卡将正确显示，其他两个选项卡将不呈现

我已经从.php文件中排除了highcharts.js和jquery.js库，并仅在main.php中调用它，见下文

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Main</title>
<link href="/test/css/redmond/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js" ></script> 

<script>
$(function() {
   $("#tabs").tabs();
});
</script>

<style type="text/css">
#tabs .ui-tabs .ui-tabs-hide {
     position: absolute;
     top: -10000px;
     display: block !important;
}        

#tabs .ui-tabs-panel {
    width: 50%;
    height: 800px;
    }
</style>

</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="/test/tag_2.php">Tag</a>
        </li>
        <li><a href="/test/monat_1.php">Monat</a>
        </li>
        <li><a href="/test/jahr_1.php">Jahr</a>
        </li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>
</body>
</html>


主要
$（函数（）{
$（“#制表符”）.tabs（）；
});
#选项卡。ui选项卡。ui选项卡隐藏{
位置：绝对位置；
顶部：-10000px；
显示：块！重要；
}        
#选项卡.用户界面选项卡面板{
宽度：50%；
高度：800px；
}

只有在第一个选项卡上，highcharts才会正确呈现。你可以在这里看到-->

下面是一个不工作的.php文件的头部部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title>Monatsübersicht</title>

<script type="text/javascript">


$(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({

                chart: {
                    renderTo: 'container',
                    type: 'column'
                },

                title: {
                    text: 'Monatsübersicht'                 
                },

                subtitle: {
                    text: '<span style="color: red">Monat: <?php echo $month; ?> Jahr: <?php echo $year; ?></span>'
                },

                credits: {
                    enabled: false
                },

                xAxis: {
                    type: 'datetime',
                    tickInterval : 24 * 3600 * 1000,
                    labels: {
                            staggerLines: 2
                    },
                    dateTimeLabelFormats: {
                        day: '%e.%b.'   
                    }
                },

                yAxis: {
                    title: {
                        text: 'kWh'
                        },
                    min: 0
                },



                tooltip: {
                    shared: true,
                    crosshairs: true,
                    xDateFormat: '%Y-%m-%d'
                },

                series: [{
                    name: 'Netz',
                    data: [<?php echo join($data, ',') ?>],
                    pointStart: Date.UTC(2010, 0, 1),
                    tickInterval: 24 * 3600 * 1000 // one day           
                },{
                    name: 'PV',
                    data: [<?php echo join($data2, ',') ?>],
                    pointStart: Date.UTC(2010, 0, 1),
                    tickInterval: 24 * 3600 * 1000 // one day
                }]
            });
        });
    });

    Highcharts.setOptions({
    global: {
        useUTC: false
        }
    });

</script>
</head>


蒙纳苏贝尔斯希特酒店
$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
文字：“Monatsübersicht”
},
副标题:{
文字：“莫纳特：贾哈尔：”
},
学分：{
已启用：false
},
xAxis：{
键入：“日期时间”，
时间间隔：24*3600*1000，
标签：{
电话号码：2
},
日期时间标签格式：{
日期：'%e.%b.'
}
},
亚克斯：{
标题：{
文本：“kWh”
},
最低：0
},
工具提示：{
分享：是的，
十字准星：没错，
xDateFormat:“%Y-%m-%d”
},
系列：[{
名称：“Netz”，
数据：[]，
pointStart:Date.UTC（2010,0,1），
间隔时间：24*3600*1000//一天
},{
名称：“PV”，
数据：[]，
pointStart:Date.UTC（2010,0,1），
间隔时间：24*3600*1000//一天
}]
});
});
});
Highcharts.setOptions({
全球：{
useUTC:false
}
});

我现在可以看出这是一篇老文章，但我最近遇到了与您相同的问题。我的解决方案是将一个变量传递给外部php文件，以命名renderTo容器。像这样：

主页：

<div id="tabs">
<ul>
    <li><a href="/test/tag_2.php?id=1">Tag</a>
    </li>
    <li><a href="/test/monat_1.php?id=2">Monat</a>
    </li>
    <li><a href="/test/jahr_1.php?id=3">Jahr</a>
    </li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>

然后给你的“renderTo:container”下列ID号：

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container<?php echo $_GET['id']; ?>',
                type: 'column'
            },

$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“列”
},

它对我有用，所以我希望你能用它来解决你的问题

/Carl

谢谢，这很清楚，但是我想从.php加载highcharts内容，正如您在上面的代码中所看到的那样…在标记中提供highchart php内容。不要重定向页面。您实际做的是当用户单击选项卡时，他被重定向到php页面。我看到了您的代码。当您更改选项卡时，您不会加载再次加载javascripts，这导致了问题。请检查tab2和tab3中的脚本代码。是的，这就是问题所在-我如何检查highchart.js当前是否已加载，并且不再加载？仅在加载页面上加载脚本。将其从php代码中删除。这将很好地工作。我建议阅读本文：感谢您的支持回答，但我认为这不是问题所在。我有3个独特的php页面，可以显示不同的highcharts。现在，我将把这些页面包括在一个页面中（jquer ui tabs page）。每次我更改选项卡时，都会加载新的php文件（带有highcharts.js）再说一次。所以，我必须有一个请求，highcharts当前是否已加载。但我不知道如何处理此问题。每个.php文件也应作为独立文件工作；-）如何显示您的代码？

<div id="tabs">
<ul>
    <li><a href="/test/tag_2.php?id=1">Tag</a>
    </li>
    <li><a href="/test/monat_1.php?id=2">Monat</a>
    </li>
    <li><a href="/test/jahr_1.php?id=3">Jahr</a>
    </li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container<?php echo $_GET['id']; ?>',
                type: 'column'
            },