码迷,mamicode.com
首页 > 其他好文 > 详细

highchart 曲线图

时间:2014-09-10 00:25:49      阅读:359      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   java   ar   for   数据   

$(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 曲线图

标签:style   blog   http   color   io   java   ar   for   数据   

原文地址:http://www.cnblogs.com/heidsoft/p/3963579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!