如何從Mysql，php創建活動和動態條形圖？

只是爲了闡明標題，我想製作一個條形圖，它將使用MySql從數據庫表中讀取數據，並自動更改高度以匹配新數據。數據通過Arduino微控制器輸入數據庫，因此數據連續添加0.5秒。我希望圖形檢測數據並相應地增加其高度。有沒有辦法做到這一點，而不是每隔0.5秒不斷刷新網頁？如何從Mysql，php創建活動和動態條形圖？

來源

2016-04-27 Ashwin Ramesh

請不要每隔0.5秒刷新整個頁面。有一個更好的方法！

如果你不反對的Jquery，使用

$("#someDiv").load("somePage.PHP");

如果沒有的jQuery，用途：

var xhttp; 
    if (str.length == 0) { 
    document.getElementById("someDiv").innerHTML = ""; 
    return; 
    } 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("someDiv").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", "somePage.PHP", true); 
    xhttp.send();

現在做一個div來加載內容：

<div id="someDiv">

在您加載的PHP頁面上，您需要繪製圖表。此方法使用Chart.js中的條形圖：http://www.chartjs.org/docs/#bar-chart

請參閱鏈接瞭解更多詳細信息。你的代碼看起來像這樣：

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 
var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
});

來源

2016-04-27 19:20:59

您需要在函數中包裝ajax（無論您使用jquery.load還是純javascript），並且隨時調用該函數來刷新頁面。 –

您可以使用AJAX每0.5秒調用一次腳本，它只會刷新頁面的一部分（圖形）。通過AJAX，您可以根據從JavaScript（或其他）JavaScript腳本中獲取的數據更改圖形。

來源

2016-04-27 19:11:13 bucketman

謝謝你，請你指點我一些材料作爲指導？ –

@AshwinRamesh嘗試https://www.udacity.com/course/intro-to-ajax--ud110我不確定codeacademy是否涵蓋AJAX。我相信你會用一點谷歌到達那裏。 – bucketman

如何從Mysql，php創建活動和動態條形圖？

回答

相關問題