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

Highcharts做统计图。

时间:2015-11-19 16:37:41      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:

<script>   
$(function () {
     var areasplineData = [[1447916401000,3],[1447918201000,4]]; 
     var typeRange = 8640000; //变量 
     Highcharts.setOptions({global:{useUTC : false}}); 
        
     $(‘#container‘).highcharts({
                 chart: {
                     type: ‘area‘
                 },
                 global: {
                     useUTC: false
                 },
                 title: {
                     text: ‘<b>总人数统计</b>‘
                 },
                 subtitle: {
                     text: ‘‘
                 },
                  xAxis: {
                     allowDecimals: false, //x 轴不允许小数
                     type: "datetime",
                     minRange: typeRange, //最小范围 //变量
                     
                     dateTimeLabelFormats:
                     {
                         millisecond: ‘%H:%M‘,
                         second: ‘%e日 %H:%M‘,
                         minute: ‘%e日 %H:%M‘,
                         hour: ‘%m月%e日 %H:%M‘,
                         day: ‘%m月%e日‘,
                         week: ‘%e. %b‘,
                         month: ‘%y年%m月‘,
                         year: ‘%Y年‘
                     }
                 },
                 yAxis: {
                     title: {
                         text: ‘人数‘
                     },
                     labels: {
                         formatter: function() {
                             return this.value + ‘人‘;
                         }
                     }
                 },
                 tooltip: {
                     shared: true,
                     valueSuffix: ‘人‘,
                     xDateFormat: ‘%Y-%m-%d %H:%M:%S‘
                 },
                 plotOptions: {
                         area: {
                             allowPointSelect :false,//是否允许选中点  
                             lineWidth:1,//线条粗细  
                             pointStart: typeRange,//变量
                             animation:true,//是否在显示图表的时候使用动画  
                             cursor:‘pointer‘,//鼠标移到图表上时鼠标的样式  
                             dataLabels:{
                                 enabled :false,//是否在点的旁边显示数据  
                                 rotation:0
                             }, 
                             enableMouseTracking:true,//鼠标移到图表上时是否显示提示框  
                                 events:{ //监听点的鼠标事件  
                                   click: function() {
                                    
                                     }  
                             },  
                             marker: {
                                 enabled: false, //是否显示点
                                 symbol: ‘circle‘,
                                 radius: 1,//点的半径 
                                 states: {
                                     hover: {
                                         enabled: false //鼠标放上去点是否放大 
                                     },
                                    select:{  
                                        enabled:false//控制鼠标选中点时候的状态  
                                    }
                                 }
                             },
                             states:{  
                                 hover:{  
                                     enabled:false,//鼠标放上去线的状态控制  
                                     lineWidth:3  
                                 }  
                             },
                         }, 
                 }, 
                series: [{
                         name: ‘人数‘,
                         data: areasplineData
                }], 
                /*修改右下角标注*/
                credits:{
                    text:"www.microgolds.com",
                    url:"http://www.microgolds.com",
                    style:{
                        color:"red"
                    }
                }
       });  
});                     
</script>  

 

Highcharts做统计图。

标签:

原文地址:http://www.cnblogs.com/sixiong/p/4977924.html

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