<!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图表的常见操作的更多相关文章

  1. highcharts图表的上钻下钻，下钻数据，与回取数据

    通常图表在下钻之后,会点返回,返回之后,可能需要调用上钻回调事件,在drillup事件里获取上钻数据,然后对需要联动进行操作: chart: { type: 'column', events: { d ...

  2. 转：Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  3. highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  4. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  5. highcharts图表中级入门：非histock图表的highcharts图表如何让图表产生滚动条

    最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来.这 ...

  6. 动态单链表的传统存储方式和10种常见操作-C语言实现

    顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...

  7. highcharts图表中级入门之xAxis label：X(横)坐标刻度值过长截断多行(换行)显示问题说明

    在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...

  8. C#路径/文件/目录/I/O常见操作汇总

    文件操作是程序中非常基础和重要的内容,而路径.文件.目录以及I/O都是在进行文件操作时的常见主题,这里想把这些常见的问题作个总结,对于每个问题,尽量提供一些解决方案,即使没有你想要的答案,也希望能提供 ...

  9. X-Cart 学习笔记（四）常见操作

    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...

随机推荐

  1. 求欧拉回路 UOJ117

    传送门什么是欧拉回路呢……?欧拉回路的定义就是从vi出发到vi,经过每条边有且只有一次的路径. 就很像一笔画. 欧拉回路的性质较多……定理也很多……直接证明很长……我们还是直接说怎么判定,怎么求欧拉回 ...

  2. bzoj1898 [Zjoi2005]Swamp 沼泽鳄鱼——矩阵快速幂

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1898 求到达方案数...还是矩阵快速幂: 能够到达就把邻接矩阵那里赋成1,有鳄鱼的地方从各处 ...

  3. bzoj2287

    背包+fft 既然要不选一个东西,那么我们求出前缀背包和后缀背包,每次答案就是f[i-1][w]*g[i+1][j-w] 但是这样复杂度还是n^3,跑不过,但是我们发现上面那个东西不就是个裸卷积吗,直 ...

  4. ECS服务器配置密钥登录及常用日志

    一.介绍 1.SSH(22端口)是Secure Shell Protocol的简写,由IETF网络工作小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通 ...

  5. MogileFS的实现和bug解决

    MogileFS的实现 准备三个主机: centos7.1:tracker节点.database节点.storage节点:192.168.213.251 centos7.2.centos7.3:sto ...

  6. 小记 react 数据存储位置

    react 中状态的六个存储位置 state 我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新 class prop 将值存在 class 的对象中,如: class App ...

  7. Final关键字解析

    final 在 Java 中是一个保留的关键字,可以声明变量.方法.类. 什么是final变量 / 类 / 方法? 任何变量前被 final 修饰就是 final 变量,定义的类前被 final 修饰 ...

  8. RandomAccessFile使用场景及总结

    大家在学到Java中IO流的时候学到了各种流,对文件的各种操作.但是唯独可能对RandomAccessFile对象不会去过多的研究,那么这个到底有什么用呢? RandomAccessFile的唯一父类 ...

  9. TCP/IP 3握手4挥手

    转:摘自<图解TCP/IP>P204 三次握手与四次挥手的状态转移图如下: 如图,由于第二次握手接收端发送SYN+ACK信号所以握手只用了三次,挥手由于接收端ACK和FIN分两次发的,所以 ...

  10. MySQL客户端导入数据库脚本，字段值出现乱码解决方法

    解决方法1:在MySql安装目录下找到my.ini,将[mysql]下的default-character-set=latin1改为default-character-set=utf8,保存,然后重启 ...