个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我目前正忙于为老年患者建立商业智能环境。老年人戴着手环来测量加速度和心率。
心率部分将是一个静态图表(不是实时图表)，我已经完成了。整个环境实际上已经完成了。实时加速度折线图除外。
所以我想使用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>
正如您所看到的，它是一个真实的图表，但它的行为是随机(静态)数据的。我的数据库充满了加速度计生成的数据。
我的问题是:如何使该图表使用数据库中的数据而不是随机数据？我正在考虑制作一个填充数据库数据的数组，然后使用该数组的变量作为图表所用数据的来源。但我不知道。
我希望我已经给了你足够的信息。
最佳答案
你可以找到答案here 。
只是为了让答案保留在这里，以防链接损坏。
以下是如何在 CanvasJS 中显示 MySQL 数据，
示例:
<强>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>
关于javascript - CanvasJS 实时折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30333226/
24
4
0
我正忙着尝试制作一个用于实时数据显示的 javascript 图表。我找到了这个 CanvasJS API。默认代码 specific chart他们的网页上的内容很好，但是当然，他们获取数据的部分，
我正在尝试使用 canvasJS 渲染两个动态图表，第一个图表正确渲染，实际上第二个图表正确填充，请参阅 inspect element 图像，但它没有显示在页面上。 这是界面，只显示一张图表 这是检
我正在尝试创建一个 dynamic chart in canvasjs 。如果数据点高于某个定义值，图表就会发生变化。我想知道您是否可以回到过去，以便可以滚动浏览动态图表。 亲切的问候，肯 最佳答案
我想根据 JSON 数组中的 N 个对象动态创建 CanvasJS 图表。如果 JSON 数组有 3 个对象，则网页应该能够显示 3 个图表。 通过id“spectraContainers”，我
我目前正忙于为老年患者建立商业智能环境。老年人戴着手环来测量加速度和心率。 心率部分将是一个静态图表(不是实时图表)，我已经完成了。整个环境实际上已经完成了。实时加速度折线图除外。 所以我想使用Can
我想在图表中显示一些数据。大小约为 200k 数据点 x16 - 这是堆叠值。我希望这个库能够及时渲染这些数据。 数组看起来像:[16][250000]，其中外部数组是堆叠值，内部数组保存数据。 [n
我正在尝试修改 Rendering a Chart from User Input for CanvasJS 的示例。我希望 x 轴成为时间线。我觉得我走在正确的轨道上，但现在陷入了设置正确的时间输入
我使用以下代码在 CanvasJS 中渲染 OHLC 图表: var candleData = []; var chart = new CanvasJS.Chart("chartContainer"
所以， 我得到一个对象，其中包含我想以这种形式(通过 Json)以下列形式绘制的数据: chartData(GraphData.year, GraphData.month, GraphData.day
我目前正在从事一个涉及 Bootstrap 和 CanvasJS 的元素，制作圆环图。 是否可以将类(class)标题和/或图例文本设为不间断文本？我一直在尝试包含 但它似乎不起作用。结果是“Le
window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: f
我正在使用 CanvasJs对于条形图，但我想根据屏幕大小进行不同的设置。 例如，对于小于 480 像素的屏幕，我想在 axisY 上完全隐藏标签。如何做到这一点？ 似乎无法使用媒体查询和css 来自
我目前面临为 canvasJS 图表创建用户输入标题的问题。我目前正在浏览 canvasJS 上的教程，我认为创建一个面向用户输入的饼图会成为一个简洁的小项目。 我目前面临的问题是试图让从 HTML
我正在使用一个名为 CanvasJS 的安静漂亮的小 js 工具。它工作得很好，直到我需要它一次显示多个图表。 现在它只显示最后一个条目。其他一切都被忽略了。我几乎尝试了所有方法，但就是想不通为什么它
我正在使用 CanvasJs 渲染图表，它现在工作正常。虽然我不确定，但它是否以适当的方式在图表中显示数据。这是我正在使用的逻辑: var query = from c in GetProducts(
我正在尝试以类似于 dygraphs 功能( example here )的方式向我的 CanvasJS 图表添加注释，但尚未找到方法。我见过一个例子，他们用图像( here )替换了一个点，但它并不
我正在尝试创建一个条形图，其中包含 2009 年至 2015 年毛里求斯大学指定专业的在校学生的数据。我正在使用下面的 Javascript，console.log(data) 显示图表已呈现。但是，
我正在尝试使用 canvasJS 渲染多线图，但它没有按预期工作。 这是我的drawChart函数 function drawChart(obj, placeholder){ var dataPoin
我必须为网站创建饼图。在我看来，我无法根据我需要的数量动态渲染饼图。最多我必须渲染 28。所以，我想我必须输入 window.onload = function () { var chart
我正在尝试使用预先确定的数据(也称为来自数据库)在canvasjs中创建饼图。在 Canvasjs 方面，有一个有用的教程可以将多个数据放入图表中(使用弱类型数组)，但我不知道如何为图例执行此操作。我
我是一名优秀的程序员,十分优秀！