- 最後登錄
- 2022-10-22
- 在線時間
- 0 小時
- 註冊時間
- 2011-10-13
- 閱讀權限
- 30
- 精華
- 0
- UID
- 10420414
- 帖子
- 663
- 積分
- 1128 點
- 潛水值
- 20810 米
| 回覆中加入附件並不會使你增加積分,請使用主題方式發佈附件。 我自己實際上去做了一個簡單的demo,發現原來arrayToDataTable不支持日期...
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Test</title>
- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script type="text/javascript">
- google.load("visualization", "1", { packages: ["corechart"] });
- function refreshChart() {
- $.ajax({ url: "data.php", success: function (response) {
- var result = $.parseJSON(response);
- console.log(result);
- drawChart(result.data);
- $('#time_div').html("Generated on: " + result.time);
- }
- });
- }
- function drawChart(result_data) {
- var data = new google.visualization.DataTable();
- data.addColumn('date', 'date');
- data.addColumn('number', 'attion');
- data.addRows(result_data.length);
- for (var i = 0; i < result_data.length; i++) {
- data.setCell(i, 0, new Date(result_data[i][0]));
- data.setCell(i, 1, result_data[i][1]);
- }
- var options = { title: 'attion', backgroundColor: 'yellow' };
- var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
- chart.draw(data, options);
- }
- $(document).ready(function () {
- refreshChart();
- setInterval(refreshChart, 3000);
- });
- </script>
- </head>
- <body>
- <div id="time_div">Initializing...</div>
- <div id="chart_div"></div>
- </body>
- </html>
複製代碼
data.php
- <?php
- $data[] = array('2014-2-7', rand(0,500));
- $data[] = array('2014-2-8', rand(0,500));
- $data[] = array('2014-2-9', rand(0,500));
- $nowtime = date("l jS \of F Y h:i:s A");
- echo json_encode(array('time'=>$nowtime, 'data'=>$data));
- ?>
複製代碼
data.php的部分我是用隨機數值來測試他會自動更新,你需要讀資料庫拿到最新的資料來顯示.
... |
|