CanvasJS实时线图
CanvasJS实时线图
提问于 2015-05-19 18:19:43
目前，我正忙于为老年病人建立一个商业智能环境。老人们戴着一个手镯，用来测量加速度和心率。
心率部分将是一个静态图表(不是实时的)，我已经完成了那个。事实上，整个环境已经基本完成了。除了实时加速线图。
因此，我想使用CanvasJS的实时生命图，因为他们提供的似乎是正确的。问题是我对javascript很熟悉。
这是真实生命线图的代码：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Live Random Data"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 20;
var dataLength = 500; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width:100%;">
</div>
</body>
</html>正如您所看到的，这是一个真实的图表，但它的行为是随机(静态)数据。我的数据库里充满了由加速度计产生的数据。
我的问题是:如何使这个图表使用我的数据库中的数据而不是随机数据？我在考虑如何创建一个包含数据库数据的数组，然后使用该数组的变量作为图表所用数据的来源。但我不知道。
我希望我已经给你足够的信息了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-19 18:35:26
你可以找到答案，这里。
这样的话，答案就留在这里，以防链接中断。
下面是如何在MySQL中显示CanvasJS数据，
- 创建一个以JSON格式返回数据的PHP服务。
- 向服务器发出AJAX请求并获取数据的HTML页面。获取数据后，它将呈现图表。
示例：
1. PHP返回JSON数据
<?php
header('Content-Type: application/json');
$con = mysqli_connect("127.0.0.1","user","password","canvasjssampledb");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}
else
{
$data_points = array();
$result = mysqli_query($con, "SELECT * FROM sales");
while($row = mysqli_fetch_array($result))
{
$point = array("label" => $row['product'] , "y" => $row['total_sales']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>2. HTML获取数据并呈现图表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery.js"></script>
<script src="canvasjs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("data.php", function (result) {
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
dataPoints: result
}
]
});
chart.render();
});
});
</script>
</head>
<body>
<div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30333226
复制相关文章
相似问题
腾讯云开发者
