75Highcharts：半个圆环_html-js-css

概述做图表，Echarts很火，其实它是模仿Highcharts的，今天就用Highcharts做半个圆环，通过圆环占比来说明本人每天的时间分配。```html:run<!DOCTYPE html><html><head><meta charset="UTF-8" /> <title>Highcharts示例</title> <script src="https://cdn.bootcss

做图表，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" ></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：半个圆环全部内容，希望文章能够帮你解决75Highcharts：半个圆环所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1072841.html