Question

将多个highcharts绑定到jquery ui标签时遇到麻烦。将加载第一个标签内容，但不显示其他2个标签内容...

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

您可以将其称为here。 Firebug说 Highcharts Error＃16 - ＆gt; error description

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

拜托，请你帮我一下......

祝你好运安迪

Answer 1

<a href = "#tabs-1">...

<div id= "tabs-1"> aaaa

此解决方案有效。确保您的ID相同。 li-＆gt;标签包含＆＃39;＃＆＃39;和div标签中指定的标签的id。

最终代码的解决方案。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tag</a></li>
        <li><a href="#tabs-2">Monat</a></li>
        <li><a href="#tabs-3">Jahr</a></li>
    </ul>
    <div id="tabs-1">aaaa</div>
    <div id="tabs-2">bbbb</div>
    <div id="tabs-3">ccc</div>
</div>

Answer 2

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

我从.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>

仅在第一个选项卡中，高级图表将呈现正确。你可以在这里看到它 - ＆gt; link

这里是一个不工作的.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>

Answer 3

我可以看到这是一个旧帖子，但我最近遇到了和你一样的问题。我的解决方案是将一个变量传递给外部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：容器这些ID号如下：

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

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

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

/卡尔

JQuery UI选项卡和多个Highcharts

3 个答案: