实况服务器制作,用Highcharts预处理实时数据及实况图表制作
我们使用highcharts设置实况图,在图表被配置对象定义后,可选预处理和最终启用,以及渲染会使用新的Highcharts.Chart()。我们可以使用 API修改图表。图表、轴、系列以及点对象会有一系列方式,比如:更新、删除、 addSeries、 addPoints等。
设置实况图
接下来我们将进入主题,谈一谈如何使用Highcharts,让他以每秒甚至更精确的时间,从服务器索检数据运行实况图。这个工作是通过建立一个自定义函数、requestData,这些最初被称为图表负载事件和Ajax成功回调函数来实现的。>>体验一下
设置服务器
在这个例子中,我们有一个返回JavaScript时间的JavaScript数组和一个随机的y值。下载文件live-server-data.php
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(0, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
全范围内定义变量图表
我们想从已设置好的文档功能和requestData功能访问图表,我们可以全范围内定义变量图表。如果图表变量在文件内部反馈功能中被定义,无法在全局范围使用。
var chart; // global
设置requestData功能
这个例子,我们使用 jQuery's $.ajax 方法完成Ajax工作,但也可以使用任何其他Ajax框架。当服务器成功接收到数据,字符串重新运算求出参数的内容,使用Highcharts addPoint并添加进图表数据系列。如果数据系列长度比20大,我们改变第一个点,然后系列会移动到左边而不是和点靠得更紧。
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
创建图表
注意equestData功能是如何开始从图表负载事件中呼出的,初始数据是空数组。
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
相关资源:
图表highcharts
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com
文章转载自:慧都控件网
实况服务器制作,用Highcharts预处理实时数据及实况图表制作相关推荐
- Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI
现在NBA联赛也进行到半决赛了,我们怎么样才能以更快的方法获取NBA的数据呢?这里我们就自己来做一个数据播报的程序 文章目录 制作NBA数据爬虫 捋顺思路 编写代码 NBAReporter.py NB ...
- 数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
- 四十、SPSS数据汇总,图表制作,频率分析和描述分析
@Author : By Runsen @Date:2020/5/14 在2020年一月初,也是我大三上的寒假,我开始写书,为什么呢?因为化工原理和化工热力学挂了,我需要重拾自己的自信. 对于一个大学 ...
- Excel制作饼图的法宝!Smartbi可视化工具图表制作
大家都知道,用Excel做饼图很简单,选取表格,插入饼图就完成了.可是饼图做地好不好看,还是有技巧的,今天,Smatrbi亮几招,大家就不用羡慕别人报告中的饼图漂亮又酷炫,我们自己也能够做出来. 如何 ...
- 借助实时数据推送快速制作在线对战五子棋小游戏丨实战
1 项目概述 游戏开发,尤其是微信小游戏开发,是最近几年比较热门的话题. 本次「云开发」公开课,将通过实战「在线对战五子棋」,一步步带领大家,在不借助后端的情况下,利用「小程序 ✖ 云开发」,独立完成 ...
- Excel中的图表制作(一) -各种商品销售量显示
目录 ■其他图表制作 ■修改数据源(VBA实现) ■数据 ■ 图表 ■图表1 (显示每一年度,各种商品的销售量) ■图表1 制作过程 ■图表 2(显示每一年度,商品销售量的合计) ■图表2 制作过 ...
- 《左手数据,右手图表》
<左手数据,右手图表> 基本信息 作者: 徐军泰 出版社:机械工业出版社 ISBN:9787111447207 上架时间:2014-1-23 出版日期:2014 年2月 开本:16开 页码 ...
- 几种常见的数据可视化分析图表
可视化技术的高速发展带动着数据的进步.数据可视化的数据分析图表,借助于可视化的大屏,将数据以图表的形式进行汇总分析,加快着用户对于数据的接受时间,同时对于整体的布局美观,也是一种合理化的设计.如何设计 ...
- 视频直播:实时数据可视化分析
作者:spiderwu,腾讯 CSIG 高级工程师 1 解决方案描述 1.1 概述 本方案结合腾讯云 CKafka.流计算 Oceanus.私有网络 VPC.商业智能分析 BI 等,对视频直播行业数字 ...
最新文章
- 管家婆有未记账的凭证怎么办_管家婆常见问题
- 《AlwaysRun!团队》第四次作业:项目需求调研与分析
- .net5或.net6(Preview) 之 顶级语句
- 向量外积_解析几何 -向量
- 谁来代替博客园——寄生博客
- 第九章 隐马尔科夫模型HMM
- MPLS ××× 的基本配置(二)
- 字节跳动社招Java常见面试题
- c语言日程报告闹钟,可以闹钟提醒的日程表,日程闹钟提醒怎么弄
- 赤子城科技三年两变:音视频社交成主力军,营收结构稳定性存疑
- Android中framework层下添加aidl编译说程序包不存在
- html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
- Excel 文本转数值的方法
- C语言中“=,^=,|=”分别表示什么意
- 解决ZooKeeper配置中出现Error contacting service. It is probably not running.
- python 最简单的方法实现一个斐波那契数列
- 全国计算机等级AJIL,全国计算机二级VB知识点2015第一次课
- Git 基础知识大全
- 【学术相关】一般的博士生毕业能进什么样的大学当老师?网友真实回复……...
- 你了解ABBYY FineReader 14么?
热门文章
- 数据结构与算---重点复习知识
- python数据分析与机器学习(Numpy,Pandas,Matplotlib)
- shell脚本实现命令的自动执行
- 毕业设计-课程设计-Spring+SpringMVC+Mybatis项目—企业权限管理系统(1)
- Java总结:SpringBoot的使用cmd命令进行Gradle构建
- JVM核心——JVM运行和类加载全过程
- 一至七-----小东西
- MySQL优化(2)--------常用优化
- Ajax跨域请求解决方案——jsonp
- 用visio反向工程画oracle数据库表的结构图