zoukankan      html  css  js  c++  java
  • highchart 曲线图

    $(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-700px;height:400px"></div>
    </body>
    </html>
  • 相关阅读:
    Uploadify跨域上传原理
    C#中HttpClient使用注意:预热与长连接
    前端必读:浏览器内部工作原理
    从零开始学习jQuery
    ManualResetEvent 类的用法
    线程池用法的改进
    我的第一篇博客
    Es6新语法 let篇
    如何测试解析是否生效?
    主机记录和记录值(域名服务器绑定详解)
  • 原文地址:https://www.cnblogs.com/heidsoft/p/3963579.html
Copyright © 2011-2022 走看看