75Highcharts：半个圆环

做图表，Echarts很火，其实它是模仿Highcharts的，今天就用Highcharts做半个圆环，通过圆环占比来说明本人每天的时间分配。

```html:run
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
    <title>Highcharts示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>
    <div id="container" style="width: 550px; height: 550px; margin: 0 auto;position: relative;top:-140px;"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        };
        var title = {
            text: '时间分配',
            align: 'center',
            verticalAlign: 'middle',
            y: 100
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }
        };
        var series= [{
            type: 'pie',
            name: '分配时间',
            innerSize: '50%',
            data: [
                ['上班',10],
                ['睡觉',7],
                ['路上',3],
                ['学习',2],
                ['吃饭',1],
                {
                    name: '其他',
                    y: 1/*,
                    dataLabels: {
                        enabled: false
                    }*/
                }
            ]
        }];

        var json = {
            chart : chart,
            title : title,
            tooltip : tooltip,
            series : series,
            plotOptions : plotOptions
        };

        $('#container').highcharts(json);
    });
</script>
</body>
</html>
```
75Highcharts：半个圆环

猜你喜欢
