75Highcharts: half circle

Do chart, Echarts is fire, in fact, it is an imitation Highcharts today to do a half circle with Highcharts, by accounting for the ring to explain my daily time distribution. 

HTML `` `: RUN 
<! DOCTYPE HTML> 
<HTML> 
<head> 
<Meta charset =" UTF-. 8 "/> 
    <title> Highcharts exemplary </ title> 
    <Script the src =" HTTPS: //cdn.bootcss. COM / jQuery / 3.2.1 / jquery.js "> </ Script> 
    <Script the 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 = "the JavaScript"> 
    $ (Document).



            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: 'allocation time', 
            innerSize: '50 % ' 
            Data: [ 
                [' work ', 10], 
                [' sleep ', 7], 
                [' road ', 3], 
                [' learning ', 2], 
                [' eat ',. 1], 
                { 
                    name:' other ', 
                    Y:. 1 / *, 
                    dataLabels:{
                        enabled: false
                    }*/
                }
            ]
        }];

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

        $('#container').highcharts(json);
    });
</script>
</body>
</html>
```
75Highcharts: half circle

Guess you like
