自動刷新Highcharts與PHP/JS

我試圖得到一張高圖表，刷新每一分鐘的新數據。到目前爲止，我已經創建了使用php作爲javascript輸出的圖表。自動刷新Highcharts與PHP/JS

我有這個頁面的頂部：

<?php 
    //set the output header as JS 
    Header("content-type: application/x-javascript"); 
    //output start of javascript chart 
?> 
    var chart; 
    chart = new Highcharts.Chart({

然後一些PHP從數據庫中獲取數據，並在highcharts格式輸出。

我現在有這樣我的索引頁上調用圖，它顯示，然後不破壞圖形，並重新顯示圖形，但它似乎並沒有重新運行PHP代碼：

<script> 
$(document).ready(function(){ 
    $.ajaxSetup({ 
     cache: false, 
    }); 
    $.get("api_dashchart.php?uID=<?php echo $userInfo_ID; ?>"); 
    var refreshId = setInterval(function(){ 
     if(chart) chart.destroy(); 
     $.get("api_dashchart.php?uID=<?php echo $userInfo_ID; ?>"); 
    }, 45000); 
});

繼續幫助非常感謝。

來源

2012-08-01 Seán McCabe

數據不會更新，因爲我認爲它是由您的php代碼構建的。您將需要使用JavaScript來執行AJAX調用，以從外部php腳本中提取圖表中的新數據。這將意味着將你的php分離成一個單獨的文件，然後可以調用它，並使用javascript將結果加載到頁面中。看看jquerys ajax函數：http://api.jquery.com/jQuery.ajax/ – Jeemusu 2012-08-01 04:35:23

我想你是在這裏混合服務器和客戶端代碼，你的PHP代碼將只在服務器上執行一次，而頁面被提取。

window.setInterval(function(
    displaygraph(); 
}, 60000);

無法更新數據，只會重新執行displaygraph（），但這種方法裏面的數據是無法從服務器更新，但是這是頁面加載過程中獲取將要使用的數據，您需要使用AJAX，併發出ajax請求來獲取更新的數據，然後使用它來重新繪製帶有新提取數據的圖表。嘗試使用Firebug調試您的JavaScript。
至於第一個加載問題，你可以在顯示圖中用if語句輕鬆完成。

if(chart) chart.destroy();

概括起來，

charting.js

var chart; 
function displaygraph() { 
$.getJSON("getjson.php", function(json) { 
    if(chart) chart.destroy(); 
    //get data from json, and use in chart 
    chart = new Highcharts.Chart({....}); 
}); 
setInterval(displaygraph, 60000);

getjson.php

<?php 
    $data = ... 
    echo json_encode($data); 
?>

更多關於$ .getJSON @http://api.jquery.com/jQuery.getJSON/，$就@http://api.jquery.com/jQuery.ajax/ JSON -incoding in php @http://php.net/manual/en/function.json-encode.php

來源

2012-08-02 09:34:51

謝謝。這絕對是開始指向正確的方向，我是一個初學者，當談到Javascript。如果我將所有文件都保存在一個文件中，並且只是調用整個文件，$ .getJSON會起作用嗎？ Atm的PHP和回聲出了必要的JS循環，所以很難區分這一點。基本上，我認爲我需要的是每隔幾分鐘就可以調用一次PHP文件的Jquery函數，它可以破壞前面的圖形，甚至只是重新加載那些改變了的東西，認爲這就是chart.reload（）。 – 2012-08-02 21:59:22

這是否會朝着正確的方向前進？ '' – 2012-08-02 22:18:45

由於圖表中唯一發生變化的部分是數據，所以理想情況下，您應該只要求ajax只爲您返回新數據。但你也可以要求整個chartingOptions從服務器@每次民意調查是你想 <？php //現有的所有東西停留在php $ chartingOptions = ... echo json_encode（$ chartingOptions）; ？> //這就是你需要的所有js var chart; （）chart.destroy（）; //從json獲取數據，並且（）函數（）函數（）{ setInterval（function（）{ $ .getJSON（「getjson.php」，function（chartingOptions）{ 用於圖表 chart = new Highcharts.Chart（chartingOptions）; } }，1000）; } – 2012-08-03 05:38:08

自動刷新Highcharts與PHP/JS

回答

相關問題