0

我很难将多个 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>

你可以在这里调用它。Firebug 说Highcharts 错误 #16 -->错误描述

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

请给我一个提示...

最好的问候安迪

4

3 回答 3

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

<div id= "tabs-1"> aaaa

此解决方案有效。确保您的 id 相同。li->a 标记包含 '#' 和 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>
于 2013-05-07T11:30:43.397 回答
0

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

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

/卡尔

于 2013-08-08T09:37:45.193 回答
0

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

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

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

这里是一个不工作的 .php 文件的 head 部分：

<!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>
于 2013-05-12T06:05:01.317 回答