/*function get_data(url, callback){
if(url=="la.anyone.alldata"){
callback([
{name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
{name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
]);
return;
}
callback([{x:1527957798468,y:3000},{x:1527957799468,y:3000},{x:1527957800468,y:3000.5},{x:1527957801468,y:3001}]);
}
get_data('la.acceptedCount.3600',mmm);
function mmm(shuju) {
console.log("------ getting la.acceptedCount.3000 -------")
console.log(shuju);
var chart = Highcharts.chart('container1',{
chart: {
type: 'spline'
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: {
tickInterval: 1000, // 坐标轴刻度间隔为一星期
tickWidth: 0,
gridLineWidth: 1,
// 时间格式化字符
// 默认会根据当前的刻度间隔取对应的值,即当刻度间隔为一周时,取 week 值
dateTimeLabelFormats: {
week: '%Y-%m-%d'
}
},
yAxis: {
// min: 0,
// title: {
// text: '降雨量 (mm)'
// }
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '{point.key}
',
pointFormat: '{series.name}: | ' +
'{point.y:.1f} mm |
',
footerFormat: '
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '东京',
data: shuju
}]
});
}
setInterval(lll,100);
function lll() {
}
get_data("la.anyone.alldata", showAllData);
function showAllData(shuju){
var htmlbody = "";
var i = 0;
for(i=0; i < shuju.length; i++){
var one_person = shuju[i];
htmlbody += "";
htmlbody += "
\n" +
" "+one_person.name+"("+one_person.id+") | \n" +
" "+one_person.approve+" | \n" +
" "+one_person.decline+" | \n" +
"
";
htmlbody += "";
}
$("#rank-one").html(htmlbody);
}*/
var chart = Highcharts.chart('container1', {
title: {
text: '合格数'
},
/*subtitle: {
text: '数据来源:thesolarfoundation.com'
},*/
xAxis: {
title: {
text: '员工'
}
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: '不合格数'
},
xAxis: {
categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
},
yAxis: {
min: 0,
title: {
text: '员工'
}
},
legend: {
/* 图例显示顺序反转
* 这是因为堆叠的顺序默认是反转的,可以设置
* yAxis.reversedStacks = false 来达到类似的效果
*/
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2]
}, {
name: '小彭',
data: [2, 2, 3, 2, 1]
}, {
name: '小潘',
data: [3, 4, 4, 2, 5]
}]
});
var chart = Highcharts.chart('container3', {
chart: {
type: 'column'
},
title: {
text: '堆积数'
},
/*subtitle: {
text: '数据截止 2017-03,来源: Wikipedia'
},*/
xAxis: {
type: 'category',
/* labels: {
rotation: -45 // 设置轴标签旋转角度
}*/
title: {
text: '员工'
}
},
yAxis: {
min: 0,
title: {
text: '人口 (百万)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '人口总量: {point.y:.1f} 百万'
},
series: [{
name: '总人口',
data: [
['上海', 24.25],
['卡拉奇', 23.50],
['北京', 21.51],
['德里', 16.78],
['拉各斯', 16.06],
['天津', 15.20],
['伊斯坦布尔', 14.16],
['东京', 13.51],
['广州', 13.08],
['孟买', 12.44],
['莫斯科', 12.19],
['圣保罗', 12.03],
['深圳', 10.46],
['雅加达', 10.07],
['拉合尔', 10.05],
['首尔', 9.99],
['武汉', 9.78],
['金沙萨', 9.73],
['开罗', 9.27],
['墨西哥', 8.87]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // :.1f 为保留 1 位小数
y: 10
}
}]
});
var chart = Highcharts.chart('container4', {
chart: {
type: 'line'
},
title: {
text: '工作时长'
},
/*subtitle: {
text: '数据来源: WorldClimate.com'
},*/
xAxis: {
title: {
text: '员工'
}
},
yAxis: {
title: {
text: '气温 (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪,对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '东京',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: '伦敦',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
var chart = Highcharts.chart('container5', {
chart: {
type: 'column'
},
title: {
text: '不良率'
},
xAxis: {
/*categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']*/
title: {
text: '员工'
}
},
yAxis: {
min: 0,
title: {
text: '水果消费总量'
}
},
tooltip: {
pointFormat: '{series.name}: {point.y}' +
'({point.percentage:.0f}%)
',
//:.0f 表示保留 0 位小数,详见教程:https://www.hcharts.cn/docs/basic-labels-string-formatting
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2]
}, {
name: '小彭',
data: [2, 2, 3, 2, 1]
}, {
name: '小潘',
data: [3, 4, 4, 2, 5]
}]
});