效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 930px; height: 400px; margin: 0 auto"></div>
</body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="http://cdn.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
var MyData = [
[9.10, 18.40],
[9.01, 16.5],
[9.5, 17.4],
[9.4, 18.9],
[10.0, 17.6],
[9.9, 18.5],
[9.2, 17.7],
[8.3, 18.5],
[9.4, 18.0],
[9.1, 17.4],
[9.2, 18.4],
[11.5, 18.8]
];
function GetDate(value) {
var h = parseInt(value);
var m = parseInt((value - parseInt(value)) * 60);
return (h < 10 ? '0' + h : h) + "：" + (m < 10 ? '0' + m : m);
};
//柱状图颜色定义
var colors=[];
for(var i=0;i<MyData.length;i++){
var workTime =MyData[i][1]-MyData[i][0];
if(workTime>9){
colors.push("#83F5C4");
}else{
colors.push("#F08664");
}
}
Highcharts.setOptions({
colors:colors
});
var chart = Highcharts.chart('container', {
chart: {
type: 'columnrange',
zoomType: 'xy'
},
title: {
text: '数据记录'
},
subtitle: {
text: '2018/06'
},
xAxis: {
crosshair: true,
categories: ['06/01', '06/02', '06/03', '06/04', '06/05', '06/06', '06/07', '06/08', '06/09', '06/10', '06/11', '06/12']
},
yAxis: [{
title: {
text: '打卡时间 ( H )'
},
plotLines: [{
color: 'red',
dashStyle: 'longdashdot',
value: 9,
width: 2,
label: {
text: '上班时间',
align: 'left',
x: -60,
y: 5
}
}, {
color: 'red',
dashStyle: 'longdashdot',
value: 18,
width: 2,
label: {
text: '下班时间',
align: 'left',
x: -60,
}
}],
}],
tooltip: {
formatter: function () {
return '<b>日期：' + this.x + '</b><br/>' +
'上班时间' + ': ' + GetDate(this.point.low) + '<br/>' +
'下班时间' + ': ' + GetDate(this.point.high) + '<br/>' +
'工作时长: ' + (this.point.high - this.point.low).toFixed(2)+'H';
}
},
plotOptions: {
column: {
colorByPoint: true
},
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return GetDate(this.y);
}
}
}
},
legend: {
enabled: false
},
series: [{
colorByPoint: true,
name: '打卡时间',
yAxis: 0,
data: MyData
}]
});
</script>
</html>
效果图：
代码：
var chart = Highcharts.chart('container', {
chart: {
type: 'columnrange', // columnrange 依赖 highcharts-more.js
zoomType: 'xy',
},
title: {
text: '每月温度变化范围'
},
subtitle: {
text: '2009 挪威某地'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
title: {
text: '温度 ( °C )'
}
},
plotOptions: {
columnrange: {
stacking: 'normal'
},
},
tooltip: {
formatter: function () {
return '<b>Date：' + this.x + '</b><br/>' +
'On work time' + ': ' + (this.point.low) + '<br/>' +
'Off work time' + ': ' + (this.point.high) + '<br/>' +
'Length of work: ' + ((this.point.high - this.point.low).toFixed(2));
}
},
series: [{
name: '温度',
data: [{
low: 2,
high: 9.4,
color: "#83F5C4"
}, {
low: 5,
high: 6.6,
color: "#83F5C4"
}, {
low: 7.8,
high: 9.5,
color: "#83F5C4"
}, {
low: 6,
high: 20.0,
color: "#83F5C4"
}],
stack: 'male',
},{
name: 'XXX',
data: [
[9.4,12],
[ 6.6,12],
[ 9.5,12],
[20.0,22]
],
stack: 'male',
color: '#FF0000'
}]
});
