且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

通过AJAX在jQueryUI的标签加载谷歌可视化

更新时间:2023-12-05 08:30:16

您的网页,将被用作标签不应该有HTML,头部或身体标记。我是pretty的肯定,他们应该只存在原始的HTML。

Your pages that will be used as tabs should not have HTML, HEAD or BODY tags. I'm pretty sure they should just exist as raw HTML.

修改

好了,这里的的index.php HEAD部分应该是什么样子(页面的其余部分保持不变):

Okay, here's what the index.php HEAD section should look like (the rest of the page remains the same):

<head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript" src="/ui/js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="/ui/js/jquery-ui-1.8.2.custom.min.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.tabs.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.core.js"></script> 
    <link type="text/css" href="/ui/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> 
    <script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    <script type="text/javascript"> 
        $(document).ready(function () {
            $("#tabs").tabs({
                ajaxOptions: {
                    error: function (xhr, status, index, anchor) {
                        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
                    }
                }
            });
        });
        google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });   
    </script> 
<title></title> 
</head>

和这里是 lazarus.php 应该是这样的:

And here's what lazarus.php should look like:

<script type='text/javascript'>
     var data = new google.visualization.DataTable();
     data.addColumn('date', 'Date');
     data.addColumn('number', 'Sold Pencils');
     data.addColumn('string', 'title1');
     data.addColumn('string', 'text1');
     data.addColumn('number', 'Sold Pens');
     data.addColumn('string', 'title2');
     data.addColumn('string', 'text2');
     data.addRows([
      [new Date(2008, 1, 1), 30000, undefined, undefined, 40645, undefined, undefined],
      [new Date(2008, 1, 2), 14045, undefined, undefined, 20374, undefined, undefined],
      [new Date(2008, 1, 3), 55022, undefined, undefined, 50766, undefined, undefined],
      [new Date(2008, 1, 4), 75284, undefined, undefined, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
      [new Date(2008, 1, 5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, undefined, undefined],
      [new Date(2008, 1, 6), 33322, undefined, undefined, 39463, undefined, undefined]
    ]);

     var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
     chart.draw(data, { displayAnnotations: true });
 </script>

<div id='chart_div' style='width: 700px; height: 240px;'></div>

这为我工作。