75Highcharts：半个圆环
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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：半个圆环的主要内容，如果未能解决你的问题，请参考以下文章
Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图