javascript - 生成图形图表报告

标签 javascript php jquery highcharts

基本上我正在创建一个跟踪设备位置的应用程序。我有一个显示详细信息的 HTML 表。

-------   --------   -------   -----------    -------
 slno      device     type      location       time
-------   --------   -------   -----------    --------
  1        iphone     apple     cafeteria      10/3/15 10am
  2        s5         samsung   1st floor      10/3/15 10.12am
  3        OneX       HTC       2nd floor      10/3/15 10am
  4        iphone     apple     cafeteria      10/3/15 10.01am
  .         ..         ..         ..                ..

我的数据是动态的,而且更多(我的表中可能有 200 个条目 5 分钟),我正在寻找来自 php 或 jquery 的动态图形图表插件,它可以将我的数据准确地放入图 TableView 中。

我一直在看Highchartsarbor.js 。并且无法为我的动态数据实现 arbor.js 。

我需要建议、链接,如何处理表格数据来生成图形图表?

最佳答案

我认为chart.js会帮助你。尝试一下

这是一个简单的动态更新图表,来自 https://gist.github.com/skhisma/5689383

Demo为了它

<!DOCTYPE html>
<html>
<head>
<title>Chart.js Redraw Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
"></script>
<script type="text/javascript" charset="utf-8">
window.chartOptions = {
segmentShowStroke: false,
percentageInnerCutout: 75,
animation: false
};
var chartUpdate = function(value) {
console.log("Updating Chart: ", value);
// Replace the chart canvas element
$('#chart').replaceWith('<canvas id="chart" width="300" height="300"></canvas>');
// Draw the chart
var ctx = $('#chart').get(0).getContext("2d");
new Chart(ctx).Doughnut([
{ value: value,
color: '#4FD134' },
{ value: 100-value,
color: '#DDDDDD' }],
window.chartOptions);
// Schedule next chart update tick
setTimeout (function() { chartUpdate(value - 1); }, 1000);
}
$(document).ready(function() {
setTimeout (function() { chartUpdate(99); }, 1000);
})
</script>
</head>
<body>
<canvas id="chart" width="300" height="300"></canvas>
</body> 

关于javascript - 生成图形图表报告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28957500/

相关文章:

php - 如何使用 PHP 和 GD 获取以字节为单位的图像资源大小?

php - gzip 或非 gzip

php - file_get_contents false 当 url 有空格时(编码一切都不起作用)

javascript - 在 'option' 内嵌套数据列表 'div' 显示 "Element ' 选项'不能嵌套在元素 'div' 内“

jQuery:用 .each() 替换字符串

javascript - 如何确认是否使用了 ES6(ReactJS + Redux)

javascript - 正则表达式比较两个数字

javascript - 将ajax jquery存储到变量中并使用该变量访问它

java - 如何通过数学计算显示 future 的日期和时间?

javascript - 为什么其他网站/服务看不到我的哈希 URL?