如何从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创建活动和动态条形图？

回答

相关问题