$(function() {

    Highcharts.setOptions({

        global: {

            useUTC: false

        }

    });

    var chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container', //图表放置的容器，DIV

            defaultSeriesType: 'spline', //图表类型为曲线图

            events: {

                load: function() {  

                }

            }

        },

        title: {

            text: '网络接收流量'  //图表标题

        },

        xAxis: { //设置X轴

            type: 'datetime',  //X轴为日期时间类型

            tickPixelInterval: 150  //X轴标签间隔

        },

        yAxis: { //设置Y轴

            title:{

                text: '网络接收流量'

            },

            max: 102400, //Y轴最大值

            min: 0,  //Y轴最小值

            labels: {

                formatter: function() {

                    return this.value/1000 +'KB';

                }

            }

        },

        tooltip: {//当鼠标悬置数据点时的提示框

            formatter: function() { //格式化提示信息

               // return '网络流量'+

               // Highcharts.dateFormat('%H:%M:%S', this.x) +''+

               // Highcharts.numberFormat(this.y, 2)+'%';

            }

        },

        legend: {

            enabled: false  //设置图例不可见

        },

        exporting: {

            enabled: false  //设置导出按钮不可用

        },

        credits: {

            text: '', //设置LOGO区文字

            url: '' //设置LOGO链接地址

        },

        series: [{

            data: (function() { //设置默认数据，

                var data = [],

                time = (new Date()).getTime(),

                i; 

                for (i = -19; i <= 0; i++) {

                    data.push({

                        x: 1410213036000,

                        y: 1250

                    });

                } 

                return data;

            })()

        }]

    });

}); 
<!doctype html>

<html lang="en">

<head>

  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

  <script>

    //左侧Javascript代码

  </script>

</head>

<body>

  <div id="container" style="min-width:700px;height:400px"></div>

</body>

</html>

highchart 曲线图的更多相关文章

  1. highchart应用示例2-上：圆角柱状图，下：多指标曲线图

    1.ajax调用接口获取数据 function getCityData() { var date1 = $('#datetimepicker1').val(); var date2 = $('#dat ...

  2. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  3. 进一步封装highchart，打造自己的图表插件：jHighChart.js

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...

  4. highchart.js的使用

    highchart.js是一个很实用的图表插件,涵盖柱状图.曲线图,区域图.3D图.饼图.散列图.混合图等等,功能很强大. 首先去官网下载最新版highchart.js插件,中文网地址:http:// ...

  5. highChart图表

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  6. Highchart基础教程－图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

  7. Highchart插件下载与安装

    提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...

  8. highchart 添加新的series

    code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" c ...

  9. C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性

    http://blog.sina.com.cn/s/blog_621e24e20101cp64.html 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可 ...

随机推荐

  1. Unit05： 实战技巧 、 资费列表 、 拦截器

    Unit05: 过滤器解决表单写中文乱码.拦截器 1. 使用过滤器解决表单中文参数值乱码问题 注意: a. 表单提交方式必须为POST. b. 过滤器的编码应该与浏览器端设置的编码一致. 2. 拦截器 ...

  2. JAVA-Unit05： 视图、序列、索引 、 约束

    Unit05: 视图.序列.索引 . 约束 视图 数据库对象之一 视图在SQL语句中体现的角色与表相同, 但它并非一张真实存在的表,它对应的 是一个查询语句的结果集. 创建一个查看10号部门员工信息的 ...

  3. excel打开csv 出现乱码怎么解决

    CSV是逗号分隔值的英文缩写,通常都是纯文本文件.CSV格式是分隔的数据格式,有字段/列分隔的逗号字符和记录/行分隔换行符.通常CSV文件可以用EXCEL正常打开,但是许多人都有这样的经历,使用EXC ...

  4. css引用方式

    网页中引用CSS样式 内联样式 行内样式表 外部样式表 链接式 导入式 内嵌方式 style标签 <!doctype html> <html> <head> < ...

  5. AOP 动态织入的.NET实现

    AOP(面向切面编程:Aspect Oriented Programming)为诸如日志记录.性能统计.安全控制.事务处理.异常处理等与具体业务逻辑无关,却需要在全局范围进行执行的功能提供了一种良好重 ...

  6. OD 实验(三) - 破解程序的文件验证

    需要破解的程序 双击程序,提示需要许可证文件 逆向程序 用 OD 打开 LoadIconA 为加载图标 LoadCursorA 为加载鼠标 F8 走一下程序 走到了这里,调用了 CreateFileA ...

  7. ubuntu 固定静态IP

    http://jingyan.baidu.com/article/e5c39bf5bbe0e739d7603396.html 路由器每重启一次,IP都会改变,那么实验室的路由器一天要断电好几次,那么每 ...

  8. 2018-2019-2 《网络对抗技术》Exp7 网络欺诈防范 Week10 20165233

    Exp7 网络欺诈防范 目录 一.基础问题 二.实验步骤 实验点一:简单应用SET工具建立冒名网站 实验点二:ettercap DNS spoof 实验点三:结合应用两种技术,用DNS spoof引导 ...

  9. 微信登录失败，redirect_uri域名与后台配置不一致，错误代码10003

    微信登录失败,redirect_uri域名与后台配置不一致,错误代码10003 1 先检查网页的授权域名  不要带http:// 2 检查下自己的appid是否正确 我换了appid没上传,多花了时间 ...

  10. git之项目上传

    git之项目上传 需求:将项目代码上传至github 前期准备: 1.github账号注册 2.安装git环境,可以打开且使用git shell. 3.生成SSH key并与github账号绑定 步骤 ...