如何从Mysql，php创建一个活动和动态的条形图 - How to create an active and dynamic bar graph from Mysql, php?

How to create an active and dynamic bar graph from Mysql, php?

为了澄清标题，我想制作一个条形图，它将使用 MySql 从数据库表中读取数据，并自动更改高度以匹配新数据。数据通过Arduino微控制器馈送到数据库，因此每0.5秒连续添加一次数据。我希望图形检测数据并相应地增加其高度。有没有办法在不每 0.5 秒不断刷新网页的情况下做到这一点？

请不要每 .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 页面上，您需要绘制图表。此方法使用图表.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
});

您可以使用 AJAX 每 0.5 秒调用一次脚本，该脚本将仅刷新页面的一部分（图形）。通过AJAX，您将能够根据它从带有javascript的PHP（或其他）脚本获取的数据来更改图形。