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>
