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 学习笔记(四)常见操作 五.常见 ...
随机推荐
- [Codeforces 449B] Jzzhu and Cities
[题目链接] https://codeforces.com/contest/449/problem/B [算法] 最短路 时间复杂度 : O(N ^ 2) [代码] #include<bits/ ...
- AT2004 Anticube
https://www.zybuluo.com/ysner/note/1304774 题面 给定\(n\)个数\(s_i\),要求从中选出最多的数,满足任意两个数之积都不是完全立方数. \(n\leq ...
- 杂项-Java：MyBatis
ylbtech-杂项-Java:MyBatis 1.返回顶部 1. MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundatio ...
- LR（逻辑回归）
逻辑回归(Logistic regression): 想要理解LR,只需要记住: Sigmoid 函数: y=1/(1+e-z) 线性回归模型: y=wTx+b 最后: y= 1/(1+e-(wTx+ ...
- MySQL5.6 windows msi安装介绍
200 ? "200px" : this.width)!important;} --> 一.功能介绍 1.MySQL Servers 该功能是mysql主要的服务,也是必须安 ...
- 运行Android Studio总是未发现设备
1.未发现虚拟机设备
- 基于.Net Core的API框架的搭建（3）
5.加入缓存支持 我们希望为项目增加缓存支持,我们选择Redis做为缓存数据库. 首先,我们在Services目录增加一个缓存接口类ICacheService: using System; using ...
- jQuery——表单应用（4）
HTML: <!--复选框应用--> <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- Hdu 4612 Warm up (双连通分支+树的直径)
题目链接: Hdu 4612 Warm up 题目描述: 给一个无向连通图,问加上一条边后,桥的数目最少会有几个? 解题思路: 题目描述很清楚,题目也很裸,就是一眼看穿怎么做的,先求出来双连通分量,然 ...
- Deepfakes教程及各个换脸软件下载
源:https://blog.csdn.net/koest/article/details/80720078 Deepfakes目前用于深度换脸的程序基本都是用python编程语言基于tensorfl ...