<!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. JSP：目录

    ylbtech-JSP:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  2. mybatis批量update操作的写法，及批量update报错的问题解决方法

    mybatis的批量update操作写法很简单,如下: public interface YourMapper extends BaseMapper<YourExt> { void upd ...

  3. P4576 [CQOI2013]棋盘游戏

    传送门 很显然,除非白子和黑子相邻,否则必然是黑子获胜虽然我并没有看出来 那么现在对黑子来说它要尽可能快的赢,对白子它要多苟一会儿 然后就是这个叫做对抗搜索的东西了 //minamoto #inclu ...

  4. 二分搜索poj106

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49944   Accepted: 10493 De ...

  5. 水题 Codeforces Round #105 (Div. 2) B. Escape

    题目传送门 /* 水题:这题唯一要注意的是要用double,princess可能在一个小时之内被dragon赶上 */ #include <cstdio> #include <alg ...

  6. ACM_寒冰王座（完全背包）

    寒冰王座 Time Limit: 2000/1000ms (Java/Others) Problem Description: 不死族的巫妖王发工资拉,死亡骑士拿到一张N元的钞票(记住,只有一张钞票) ...

  7. 409 Longest Palindrome 最长回文串

    给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串.在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串.注意:假设字符串的长度不会超过 ...

  8. Focusky的下载、安装、注册和使用（动画演示大师）

    一.下载 二.安装 三.使用 四.注册 五.附录 非常感谢Focusky官方团队开发并提供实用的这么一款软件!!! 一.下载 http://www.focusky.com.cn/ 二.安装 三.使用 ...

  9. Git学习笔记(2)-创建仓库

    一.Git简介 1.Git是什么 Git是分布式版本控制系统 2.Git有什么特点 (1)Git是分布式的SCM,SVN是集中式的 (2)Git每个历史版本存储完整的文件,SVN存储文件差异 (3)G ...

  10. CF822C Hacker, pack your bags!

    思路: 对于一个区间[l, r],只需枚举所有满足r' < l并且二者duration之和为x的区间[l', r'],寻找其中二者cost之和最小的即可.于是可以开一个数组a[],a[i]表示所 ...