highcharts图表的常见操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="TCPConnect"></div>
<!-- 引入highcharts -->
<script src="../highcharts/highcharts.js"></script>
<script src="../highcharts/highcharts-zh_CN.js"></script>
<script> //-------------
//- TCPConnect CHART -
//-------------- Highcharts.setOptions({
global:{
timezone:'Asia/Shanghai'
}
});//全局设置时间
var TCPConnectxAxis=['00','01','02','03','04','05','06'];
var TCPConnectData=[{
name: 'tcpconnect',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'tcpwait',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]; var TCPConnectOptions={
credits:{ //版权信息
//enabled:false,
text:"点击查看更多",
href:'http://10.88.22.8/zabbix',
position:{
align:'left', //显示在左边
x:20,
}
},
chart: {
type: 'spline'
},
title:{text:''},
xAxis: {
categories: TCPConnectxAxis
},
yAxis:{title:"",},
series:TCPConnectData,
}; //实例化图表
var TCPConnectspline = Highcharts.chart('TCPConnect', TCPConnectOptions); //TCPConnectspline.destroy()//销毁图表
var TCPConnectAddData={name: '新增数据', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]}
//TCPConnectspline.addSeries(TCPConnectAddData) //新增数据函数 var TCPConnectNewData=[{name: '新增数据', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]},{name: '新增数据1', data: [7.0, 69, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]}] //TCPConnectspline.update({series:TCPConnectNewData,}) //更新图表数据 </script>
</body>
</html>
更多示例请查看 https://api.hcharts.cn/highcharts
highcharts图表的常见操作的更多相关文章
- highcharts图表的上钻下钻，下钻数据，与回取数据
通常图表在下钻之后,会点返回,返回之后,可能需要调用上钻回调事件,在drillup事件里获取上钻数据,然后对需要联动进行操作: chart: { type: 'column', events: { d ...
- 转：Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- highcharts图表中级入门：非histock图表的highcharts图表如何让图表产生滚动条
最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来.这 ...
- 动态单链表的传统存储方式和10种常见操作-C语言实现
顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...
- highcharts图表中级入门之xAxis label：X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- C#路径/文件/目录/I/O常见操作汇总
文件操作是程序中非常基础和重要的内容,而路径.文件.目录以及I/O都是在进行文件操作时的常见主题,这里想把这些常见的问题作个总结,对于每个问题,尽量提供一些解决方案,即使没有你想要的答案,也希望能提供 ...
- X-Cart 学习笔记（四）常见操作
目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...
随机推荐
- [USACO17DEC]Push a Box
https://www.zybuluo.com/ysner/note/1293166 题面 戳我 解析 挺不错的一道图论码量题. 可以借此回顾一下\(noip2013\)华容道. 思路和华容道差不多. ...
- PCB 圆形板切边算法 实现
在工程CAM处理圆形拼板是个头疼的问题,需人工程师自行设计切边 满足可以拼板并且拼板后锣板板边没有内角,不然会影响装配 1.原始单 PCS圆形板 此外形如果不采用邮票孔连接的话,采V-CUT连接须采用 ...
- knockout jquery警告删除
//触发删除的动作 $("a.delete").live('click', function () { var ...
- C#多线程，基础知识很重要
本文通过介绍C#多线程的用法(基础玩法),附加介绍一下WinForm里边跨线程访问UI的方法 如图,就是这么一个简单的界面,每个按钮下面一个方法,分别设置文本框里边的内容,那么,开始吧! 先介绍一下W ...
- n阶完全生成图的数量
有些事不是看到了希望才去坚持,而是坚持了才会看到希望 问题 I: 星际之门(一) 时间限制: Sec 内存限制: MB 提交: 解决: [提交][状态][讨论版] 题目描述 公元3000年,子虚帝国统 ...
- May Challenge 2019 Division 2 水题讲解
Reduce to One 这题其实蛮水的? 题意就是说: 给定一个 1~n 的序列,每次挑两个数 x y 合并,合并值为 \(x+y+xy\) ,然后求不断合并最后剩下的一个的最大值 随便搞搞发现答 ...
- [C和指针] 4-语句、5-操作符和表达式
第4章 语句 4.1 表达式语句 C并不存在专门的"赋值语句",赋值就是一种操作,就像加法和减法一样,所以赋值就在表达式内进行. 你只要在表达式后面加上一个分号,就可以把表达式转变 ...
- GIT学习之路最终日 标签管理+总结
本文参考廖雪峰老师的博客进行总结,完整学习请转廖雪峰博客 6.1 创建标签 命令git tag (name)用于新建一个标签,默认为HEAD,也可以指定一个commit id: git tag -a ...
- jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [ Luogu 3935 ] Calculating
\(\\\) \(Description\) 若\(x\)分解质因数结果为\(x=p_1^{k_1}p_2^{k_2}\cdots p_n^{k_n}\),令\(f(x)=(k_1+1)(k_2+1) ...