Highchartsjs使用总结及实时动态刷新图
柱状图:
$('#container').highcharts({
//突显红色柱;
series: [ 523, 345, 785, 565, 843,{'color': 'red','y': 300},726, 590, 665, 434, 312, 432]
})
饼图、环型图:
$('#container').highcharts({
//百分比环形图;
plotOptions:{
pie: {
innerSize: 140,//等于0时,为饼图;
allowPointSelect: true,
cursor: 'pointer',
colors: [
"#f44a36","#4879df",#21c393",#fad567"
]
}
}
})
动态实时刷新曲线图(setInterval(放入动态数据),1000);
Highcharts选项配置详细说明文档
Highcharts API官方文档
//蜘蛛图
$('#container').highcharts({
yAxis: {
gridLinInterpolation: 'polygon',
min: 0,
tickInterval: 1,
max: 5,
gridLineColor: '#000000',
lineColor: '#000000',//背景颜色;
labels: {
enabled: false
}
},
//隐藏图标头;
title: {
text: '',
x: -80
},
//隐藏logo水印;
credits: {
enabled: false,
},
//隐藏注释图标;
legend: {
enabled: false
},//图表的打印及导出功能失效
exporting:{
enabled:false
},
//更换颜色;
series: [{
name: '',
data: charInfo,
//color:'#ff0000';//线条颜色
}]
});
//百分比堆积柱状图:
$('#container').highcharts({
//百分比柱状图颜色;
chart: {
type: 'bar' //bar垂直;column水平;
},
plotOptions: {
bar: { //上下对应;
stacking: 'percent'
},
},
});
Highchartsjs使用总结及实时动态刷新图的更多相关文章
- FusionCharts制作实时刷新图
转自:http://yklovejava-163-com.iteye.com/blog/1889949 下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了 ...
- 关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题
关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法 在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主 ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计(三):V4L2接口通过MPP平台输出
可以首先参考前面两篇文章: Hi3559AV100外接UVC/MJPEG相机实时采图设计(一):Linux USB摄像头驱动分析: https://www.cnblogs.com/iFrank/p/1 ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计(二):V4L2接口的实现(以YUV422为例)
下面将给出Hi3559AV100外接UVC/MJPEG相机实时采图设计的整体流程,主要实现是通过V4L2接口将UVC/MJPEG相机采集的数据送入至MPP平台,经过VDEC.VPSS.VO最后通过HD ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计(一):Linux USB摄像头驱动分析
下面将给出Hi3559AV100外接UVC/MJPEG相机实时采图设计的整体流程,主要实现是通过V4L2接口将UVC/MJPEG相机采集的数据送入至MPP平台,经过VDEC.VPSS.VO最后通过HD ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计(四):VDEC_Send_Stream线程分析
下面随笔将对Hi3559AV100外接UVC/MJPEG相机实现实时采图设计的关键点-VDEC_Send_Stream线程进行分析,一两个星期前我写了有三篇系列随笔,已经实现了项目功能,大家可以参考下 ...
- C# 实时折线图,波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
- web实时长图实践--摘抄
背景简介 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自 ...
- iNeuOS工业互联平台,WEB组态(iNeuView)集成图报组件,满足实时数据图形化展示的需求
目 录 1. 概述... 1 2. 平台演示... 2 3. 应用过程... 3 4. 实时数据展示效果... 5 1. 概述 市场和开源社区有 ...
随机推荐
- ZooKeeper使用命令大全
stat path [watch] set path data [version] ls path [watch] delquota [-n|-b] path ls2 path ...
- SqlServer 线下讲座
2017年有幸在某互联网公司及其子公司进行了一次技术分享性质的讲座,讲座内容主要针对sqlserver 2017以及azure sql 的一些技术特性,进一步展示sql server 及其相关产品的新 ...
- VMWare 虚拟机设置网络访问
使用桥接模式 将本机IP设置为和虚拟机IP在同一个可以上网的网段中
- c/c++ 浅拷贝
c/c++ 浅拷贝 编译器合成的拷贝构造函数和=重载函数,只是做如下处理: 对象1.成员变量a = 对象2.成员变量a 如果成员变量a是指针,执行完拷贝构造函数或者*=重载函数**后,对象1和对象2的 ...
- Linux学习历程——Centos 7 cat命令
一.命令介绍 我们使用man cat命令,可以看到cat命令的用途是连接文件或标准输入并打印,简单来说cat命令是用来查看纯文本文件(通常为内容较少的文件),与重定向符号配合使用,可以实现创建文件与合 ...
- 修改Windows默认远程端口号
1.定位注册表,[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Tds\tcp],右侧修改 ...
- centos7 Docker私有仓库搭建及删除镜像
如果不想用私有镜像库,你可以用docker的库 https://hub.docker.com 环境准备 环境:两个装有Docker 17.09.0-ce 的centos7虚拟机 虚拟机一:192.16 ...
- Vue学习之路7-v-on指令学习之简单事件绑定
前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...
- Docker for Windows 中文文档(3)——Docker Settings
Docker设置 Docker运行时,显示Docker鲸鱼. 默认情况下,Docker鲸鱼图标被放置在“通知”区域中. 如果隐藏,单击任务栏上的向上箭头显示. 提示:您可以将鲸鱼固定在通知框外面,使其 ...
- 《JAVA程序设计》_第一周学习总结
20175217吴一凡 <java程序设计> 第一周学习总结 虽然已经做好了心理准备,但第一周的学习任务着实让我忙了整整三天,还是挺充实的吧.寒假已经在自己的电脑上安装好了虚拟机,我就在我 ...