【Highcharts】柱形范围图

效果图：
代码：
<!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>
【Highcharts】柱形范围图

猜你喜欢
