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>
  • 相关阅读:
    node.js + expres 的安装
    ubuntu文件夹建立软链接方法
    $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
    与 的区别
    ubuntu卸载软件命令,apt-get remove
    php中session机制的详解
    mysql中查询语句中的一个知识点说明
    Git忽略规则及.gitignore规则不生效的解决办法
    Linux中find常见用法示例
    Waiting for table metadata lock
  • 原文地址:https://www.cnblogs.com/heidsoft/p/3963579.html
Copyright © 2011-2022 走看看