<!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. Ｄinic(模板　再错是不可能的　这辈子都不可能了）

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  2. nginx开发（四）调用ffmpeg，搭建rtmp直播流。

    1: 修改conf文件,配置rtmp直播 打开usr/local/nginx/conf/nginx.conf,添加红色内容: rtmp {#rtmp点播配置    server {        li ...

  3. bzoj1509

    树的直径 我先开始以为是个图,想想并不知道什么求图的直径的方法,结果是棵树 那么直觉告诉我们是在直径上面,实际上就是直径+min(i->u,i->v),扫一遍就行了 #include< ...

  4. 昆石VOS3000_2.1.2.4完整安装包及安装脚本

    安装包下载地址:http://www.51voip.org/post/56.html 安装教程: 上传安装包 ·给整个目录授权 chmod 777 /root/vosintsall `核实 关闭sel ...

  5. 【167】IDL 中相关技巧

    IDL 中相关技巧 1. 注释:分号“;”表示注释内容的开始. 2. 续行:最后一个字符是“$”,那么本行将紧接着下一行,续行标志.(换行符,$+回车) 3. 中文编码:窗口>首选项>常规 ...

  6. 爬虫—Selenium使用

    Selenium使用 Selenium是一个自动化测试工具,可以驱动浏览器器执行特定的动作,如点击,下拉等.同时还可以获取浏览器当前呈现页面的源代码,可见即可爬. 1.准备 我们使用谷歌Chrome浏 ...

  7. webservice 权限控制

    webservice 如何限制访问,权限控制?1.服务器端总是要input消息必须携带用户名.密码信息 如果不用cxf框架,SOAP消息(xml片段)的生成.解析都是有程序员负责 2.拦截器 为了让程 ...

  8. [W3School]JavaScript教程学习

    JavaScript 简介 JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript ...

  9. PROTEUS快捷键与部分知识点

    缩放 有以下几种方法对原理图进行缩放: 移动鼠标需要所放的地方,滚动鼠标滑轮进行缩放. 移动师表需要缩放的地方,按键盘F6放大,F7缩小 按下ShIFT键,鼠标左键拖拽出需要放大的区域,这叫SHIFT ...

  10. LPS HDOJ 4745 Two Rabbits

    题目传送门 /* 题意:一只兔子顺时针跳,另一只逆时针跳,跳石头权值相等而且不能越过起点 LPS:这道就是LPS的应用,把环倍增成链,套一下LPS,然而并不能理解dp[i][i+n-2] + 1,看别 ...