javascript CanvasJS：使用 data.php、json encode 和 ajax（带宽计）制作动态图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32540090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CanvasJS: Making a chart dynamic with data.php, json encode and ajax(bandwidth meters)
提问by ShtHappens796
First things first, I am trying to parse the data from a data.php file that uses json encode to echo a datapoint. The datapoint is updated every time the data.php file is requested, but not in a series of datapoints. Instead it just changes the time value and refreshes its y content. I haven't found a working way to actually make the php file echo series of datapoints and not update a single one.
首先，我试图从使用 json 编码来回显数据点的 data.php 文件中解析数据。每次请求 data.php 文件时都会更新数据点，但不会在一系列数据点中更新。相反，它只是更改时间值并刷新其 y 内容。我还没有找到一种实际使 php 文件回显一系列数据点而不更新单个数据点的工作方法。
Next up, the chart parses the data.php file and it indeed shows the datapoint. BUT I want to make this chart update every second and add new datapoints on every update so that I have a working bandwidth graph.
接下来，图表解析 data.php 文件，它确实显示了数据点。但是我想让这个图表每秒更新一次，并在每次更新时添加新的数据点，这样我就有了一个工作带宽图。
Here is my code:
这是我的代码：
index.php:
索引.php：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$.getJSON("data.php", function (data_points) {
var dps = data_points
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
panEnabled: true,
animateEnabled: true,
data: [ {
type: "splineArea",
xValueType: "label",
y: "y",
dataPoints: dps } ]
});
chart.render();
});
});
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
data.php:
数据.php：
<?
session_start();
session_destroy();
session_start();
$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
sleep(1);
$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
$rbps = $rx[1] - $rx[0];
$round_rx=round($rbps/1, 2);
$time=date("Y-m-d H:i:s");
$_SESSION['rx'] = $round_rx;
$data_points['label'] = $time;
$data_points['y'] = $_SESSION['rx'];
echo json_encode([$data_points]);
?>
If anyone know on how to make this map dynamic then please provide me some help. An example output of the data.php file (what it echoes) is the following:
如果有人知道如何使这张地图动态化，请为我提供一些帮助。data.php 文件的示例输出（它回显的内容）如下：
[{"label":"2015-09-12 21:34:12","y":1500}]
Thank you in advance for any help provided.
预先感谢您提供的任何帮助。
采纳答案by Naveen V
In order to update charts that way, you need to create chart only once (outside the ajax request) and keep adding new dataPoints via ajax request each second as shown below.
为了以这种方式更新图表，您只需要创建一次图表（在 ajax 请求之外），并每秒通过 ajax 请求不断添加新的数据点，如下所示。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
panEnabled: true,
animateEnabled: true,
data: [ {
type: "splineArea",
xValueType: "label",
y: "y",
dataPoints: []
} ]
});
function updateChart(){
$.getJSON("data.php", function (data_points) {
for(var i = 0; i < data_points.length; i++){
chart.options.data[0].dataPoints.push(data_points[i]);
}
chart.render();
});
}
var updateInterval = 1000;
setInterval(function(){
updateChart()
}, updateInterval);
});
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 500px;"></div>
</body>
</html>
