<!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. 模块化编程:AMD规范

    目前,通行的Javascript模块规范共有两种:ComonJS和AMD. CommonJS node.js的模块系统,就是参照CommonJS规范实现的.在ConmonJS中,有一个全局方法requ ...

  2. Patrik 音乐会的等待 单调栈的迷茫回忆

    STL 一定要学好 一定要学好,一定要学好!!! 题目链接:https://www.luogu.org/problemnew/show/P1823 我们需要单向查找:用单调栈: 思路:维护一个身高单调 ...

  3. 不温不火WindowsPhone

    最近在考虑是否转其他平台,如iOS或者Android或者javascript等. 已经以Windows Phone 开发作为工作就一年了(也不算是真正的Windows Phone开发吧,仅仅是开发高德 ...

  4. Django之序列化

    关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,特别的Ajax请求一般返回的为Json格式. 1.serializers           from django.core ...

  5. C语言小项目-基于TCP协议和SOCKET编程的网络通信系统

    1.1 功能结构图   网络通信系统一共由4个模块组成,分别是点对点客户端.点对点服务端.服务器中转服务端.服务器中转客户端.这4个模块是成对使用的,点对点客户端和点对点服务端一起使用,服务器中转服务 ...

  6. Uva 796 Critical Links (割边+排序)

    题目链接: Uva 796 Critical Links 题目描述: 题目中给出一个有可能不连通的无向图,求出这个图的桥,并且把桥按照起点升序输出(还有啊,还有啊,每个桥的起点要比终点靠前啊),这个题 ...

  7. STL之set和multiset

    set是与集合相关的容器,STL为我们提供了set的实现,在编程题中遇见集合问题直接调用是十分方便 SET set模版类的定义在头文件<set>中. 定义set对象的示例代码如下: set ...

  8. map Codeforces Round #Pi (Div. 2) C. Geometric Progression

    题目传送门 /* 题意:问选出3个数成等比数列有多少种选法 map:c1记录是第二个数或第三个数的选法,c2表示所有数字出现的次数.别人的代码很短,思维巧妙 */ /***************** ...

  9. Android 性能优化（24）＊性能工具之「Traceview,dmtracedump」Profiling with Traceview and dmtracedump ：记录并查看函数调用栈＊

    Profiling with Traceview and dmtracedump In this document Traceview Layout         Traceview工具界面介绍 T ...

  10. Previous operation has not finished; run 'cleanup' if it was interrupted.SVN报错

    原因: 错误的原因是SVN管理的文件夹改名.删除文件太过频繁,导致有操作挂起了. 解决方式: 1.百度sqlite3.exe并下载. 2.将该文件解压到项目根目录下的.svn文件夹中. 3.打开cmd ...