您的位置：首页 > 其它

向下钻取按钮位置设置

2017-03-21 00:00 211 查看

<!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.setOptions({
lang: {
drillUpText: '<<{series.name}',
}
});
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: {
enabled:false
// 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: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: []
}
});

});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： hightcharts

相关文章推荐

新的分享

章节导航