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