Highcharts做统计图。

<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>  

 

 

 

<script type="text/javascript" src="/st/js/graph/jQuery.js" ></script>
<script src="/st/js/graph/highcharts.js"></script>
<script src="/st/js/graph/modules/exporting.js"></script> 
<script>   
$(function () {
     var areasplineData = {$data};
     var areasplineregister = {$register};
     var areasplineguest = {$guest};
     var areasplinemt4_yes = {$mt4_yes};
     var areasplinemt4_no = {$mt4_no};
     var areasplineclient_pc = {$client_pc};
     var areasplineclient_app = {$client_app};  
     
     var typeRange = {$typeRange}; //变量 
     var titleName = "{$roomname}" +"总人数统计";
     Highcharts.setOptions({global:{useUTC : false}}); 
        
     $('#container').highcharts({
                 chart: {
                     type: 'spline'
                 },
                 global: {
                     useUTC: false
                 },
                 title: {
                     text: '<b>'+ titleName +'</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: '%m月%e日',
                         month: '%y年%m月',
                         year: '%Y年'
                     }
                 },
                 yAxis: {
                     min: 0,
                     title: {
                         text: '人数'
                     },
                     labels: {
                         formatter: function() {
                             //console.log(this);
                             return this.value + '人';
                         }
                     }
                 },
                 tooltip: {
                      shared: true,
                     valueSuffix: '人',
                     xDateFormat: '%Y-%m-%d',
                    formatter : function(){

                      function accDiv(arg1,arg2){ 
                            var t1=0,t2=0,r1,r2; 
                            try{t1=arg1.toString().split(".")[1].length}catch(e){} 
                            try{t2=arg2.toString().split(".")[1].length}catch(e){} 
                            with(Math){ 
                                r1=Number(arg1.toString().replace(".","")) 
                                r2=Number(arg2.toString().replace(".","")) 
                                return (r1/r2)*pow(10,t2-t1); 
                            } 
                        }
                        var times = new Date(parseInt(this.points[0].key)).toLocaleString().substr(0,10).replace(/\//g, "-");
                        var str = '<span style="font-size: 12px">' + times + '</span><br/>';
                         for (var i in this.points)
                         {
                                 if (typeof(this.points[i]) != "object"){ continue; }

                                 if (i == 0){
                                         str += '<span style="font-size: 12px">当日总人数:'+this.points[i].y+'人</span><br/>';
                                 }else if (i == 1){
                                        var val = parseFloat(accDiv(parseInt(this.points[1].y), parseInt(this.points[0].y)).toFixed(4)*100);
                                            
                                         str += '<span style="font-size: 12px">总游客人数:'+this.points[i].y+'人 占比'+ (val+'').substr(0,(val+'').indexOf(".")+3) +'%</span><br/>';
                                 }else if (i == 2){
                                         var value =  parseFloat(accDiv(parseInt(this.points[2].y), parseInt(this.points[0].y)).toFixed(4)*100);
  
                                         str += '<span style="font-size: 12px">总注册人数:'+this.points[i].y+'人 占比'+ (value+'').substr(0,(value+'').indexOf(".")+3) +'%</span><br/>';
                                 }else if (i == 3){
                                          var value =parseFloat(accDiv(parseInt(this.points[3].y), parseInt(this.points[0].y)).toFixed(4)*100);
                                         str += '<span style="font-size: 12px">真实客户人数:'+this.points[i].y+'人 占比'+ (value+'').substr(0,(value+'').indexOf(".")+3) +'%</span><br/>';
                                 }else if (i == 4){
                                        var value =  parseFloat(accDiv(parseInt(this.points[4].y), parseInt(this.points[0].y)).toFixed(4)*100);
                                         str += '<span style="font-size: 12px">普通客户人数:'+this.points[i].y+'人 占比'+ (value+'').substr(0,(value+'').indexOf(".")+3) +'%</span><br/>';
                                 }else if (i == 5){
                                         var value = parseFloat(accDiv(parseInt(this.points[5].y), parseInt(this.points[0].y)).toFixed(4)*100);
                                         str += '<span style="font-size: 12px">PC端听课人数:'+this.points[i].y+'人 占比'+  (value+'').substr(0,(value+'').indexOf(".")+3) +'%</span><br/>';
                                 }else if (i == 6){
                                         var value =  parseFloat(accDiv(parseInt(this.points[6].y),parseInt(this.points[0].y)).toFixed(4)*100);
                                         str += '<span style="font-size: 12px">移动端听课人数:'+this.points[i].y+'人 占比'+ (value+'').substr(0,(value+'').indexOf(".")+3) +'%</span><br/>';
                                 }
                          }
                         return str;//这里随便你返回什么东西吧
                     },
                }, 
                 plotOptions: {
                     spline: {
                             allowPointSelect :false,//是否允许选中点  
                             lineWidth:1,//线条粗细  
                             fillOpacity: 0.5,
                             pointStart: typeRange,//变量
                             animation:true,//是否在显示图表的时候使用动画  
                             cursor:'pointer',//鼠标移到图表上时鼠标的样式  
                             dataLabels:{
                                 enabled :false,//是否在点的旁边显示数据  
                                 rotation:0
                             }, 
                             enableMouseTracking:true,//鼠标移到图表上时是否显示提示框  
                                 events:{ //监听点的鼠标事件  
                                   click: function() {
                                    
                                     }  
                             },  
                             marker: {
                                 enabled: false, //是否显示点
                                 symbol: 'circle',
                                 radius: 2,//点的半径 
                                 states: {
                                     hover: {
                                         enabled:true //鼠标放上去点是否放大 
                                     },
                                    select:{  
                                      //  enabled:false//控制鼠标选中点时候的状态  
                                    }
                                 }
                             },
                             states:{  
                                 hover:{  
                                     enabled:true,//鼠标放上去线的状态控制  
                                     lineWidth:1  
                                 }  
                             },
                         }, 
                 }, 
                series: [{
                            color: '#CC0000',
                            name: "总人数",
                            data: areasplineData
                        },{
                             color: '#227700',
                                name: "总游客人数",
                                 data: areasplineguest
                        },{
                                color: '#888800',
                                 name: "总注册人数",
                                 data: areasplineregister
                        },{
                            color: 'green',
                                name: "真实客户人数",
                                 data: areasplinemt4_yes
                        },{
                            color: '#77FFEE',
                                name: "普通客户人数",
                                 data: areasplinemt4_no
                        },{
                            color: '#220088',
                                name: "PC端听课人数",
                                 data: areasplineclient_pc
                        },{
                                color: '#FF3EFF',
                                name: "移动端听课人数",
                                data: areasplineclient_app
                        }],
                /*修改右下角标注*/
                credits:{
                    text:"www.microgolds.com",
                    url:"http://www.microgolds.com",
                    style:{
                        color:"red"
                    }
                }
       });  
});                     
</script>  

 

转载于:https://www.cnblogs.com/sixiong/p/4977924.html