做图表,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:半个圆环所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)