<!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. codeforces round #428 div2

    A:暴力模拟,能加就加,如果累计到了8就加上,每次累积 #include<bits/stdc++.h> using namespace std; int main() { ; scanf( ...

  2. E20170616-hm

     transaction   n. 交易,业务,事务; 办理,处理; (一笔) 交易,(一项)事务; (学会等的) 会议记录,学报;  isolation   n. 隔离; 孤独; 隔离状态; 孤立状 ...

  3. 插入CSS的方法

    传送门    选择器  selector {declaration1; declaration2; ... declarationN }   例:   p { text-aligh:center; } ...

  4. P3297 [SDOI2013]逃考

    传送门 完全看不出这思路是怎么来的-- 首先对于两个亲戚,他们监视范围的边界是他们连线的中垂线.那么对于一个亲戚来说它能监视的范围就是所有的中垂线形成的半平面交 然后如果某两个亲戚的监视范围有公共边, ...

  5. self , static 都是何方神圣？

    前言: php中 this  用于代指 对象, 而代指类的却有3个:self , static , parent self , static , parrent 既然都能代指类,那么他们之间又有哪些区 ...

  6. Hbase源码分析：RPC概况

    RPC是hbase中Master,RegionServer和Client三者之间通信交流的纽带.了解hbase的rpc机制能够为通过源码学习hbase奠定良好的基础.因为了解了hbase的rpc机制能 ...

  7. Windows Azure中文博客 Windows Azure入门教学系列 (一): 创建第一个WebRole程序

    http://blogs.msdn.com/b/azchina/ 本文转自:http://blogs.msdn.com/b/azchina/archive/2010/02/09/windows-azu ...

  8. 动态属性ExpandoObject

    1.动态创建对象及其属性ExpandoObject 查看ExpandoObject的定义:

  9. [ 东莞市选 2008 ] GCD&LCM

    \(\\\) \(Description\) 给出两数的\(GCD\)和\(LCM\),求合法的两数之差的绝对值最小是多少. \(GCD\times LCM\le10^{18}\) \(\\\) \( ...

  10. poj3411 Paid Roads

    思路: 搜索.注意点和边都有可能经过多次. 实现: #include <iostream> #include <cstdio> #include <vector> ...