<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<title>请假统计</title>
<link rel="stylesheet" type="text/css" href="../../css/vacate/weui.css" />
<link rel="stylesheet" type="text/css" href="../../css/vacate/weiui_expand.css" />
</head>
<body>
<!--容器-->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
<script src="../../js/vacateCount/zepto.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
events:{
drillup: function(e) {
// 上钻回调事件
this.title.update({
text:"2016年1月-5月，病假统计"
});
},
drilldown:function(e){
var chart = this,
drilldowns = {
'一月份':{
name: '一月份',
id: 'one',
data: [
[
'呼吸道',
6
],
[
'消化道',
7
],
[
'其他',
7
]
]
},
'二月份':{
name: '二月份',
id: 'two',
data: [
[
'呼吸道',
15
],
[
'消化道',
8
],
[
'其他',
7
]
]
},
'三月份':{
name: '三月份',
id: 'three',
data: [
[
'呼吸道',
5
],
[
'消化道',
3
],
[
'其他',
2
]
]
},
'四月份':{
name: '四月份',
id: 'four',
data: [
[
'呼吸道',
5
],
[
'消化道',
10
],
[
'其他',
15
]
]
},
'五月份':{
name: '五月份',
id: 'five',
data: [
[
'呼吸道',
5
],
[
'消化道',
6
],
[
'其他',
3
]
]
}
},
series = drilldowns[e.point.name];
chart.title.update({
text:series.name+"病假详情",
});
chart.addSeriesAsDrilldown(e.point, series);
}
}
},
title: {
text: '2016年1月-5月，病假统计'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '总的请假人数'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}人</b> of total<br/>'
},
series: [{
name: '统计',
colorByPoint: true,
data: [{
name: '一月份',
y: 20,
drilldown: true
}, {
name: '二月份',
y: 30,
drilldown: true
}, {
name: '三月份',
y: 10,
drilldown: true
},{
name: '四月份',
y: 25,
drilldown: true
},{
name: '五月份',
y: 14,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
</script>
</body>
</html>
扫一扫
6701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
