大同网站开发网站域名使用代理

大同网站开发,网站域名使用代理,做搜狗网站排名首页,张掖网站建设Highcharts 饼图#xff08;Pie Chart#xff09;详解 Highcharts 的饼图是最经典的占比展示图表#xff0c;适合显示一个数据系列中各部分占整体的比例#xff08;总和为100%#xff09;。它支持普通饼图、半圆饼图#xff08;semi-circle donut#xff09;、环形图Pie Chart详解Highcharts 的饼图是最经典的占比展示图表适合显示一个数据系列中各部分占整体的比例总和为100%。它支持普通饼图、半圆饼图semi-circle donut、环形图donut、3D 饼图等多种变体。主要类型pie基本饼图donut环形饼图中间镂空常用于突出总值3D pie立体饼图需引入 highcharts-3d.js1. 基本饼图示例以下是一个完整的标准饼图示例!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8titleHighcharts 饼图示例/titlescriptsrchttps://code.highcharts.com/highcharts.js/script/headbodydividcontainerstylewidth:800px;height:600px;margin:50px auto;/divscriptHighcharts.chart(container,{chart:{type:pie,// 关键设置为 piebackgroundColor:#f8f9fa,plotShadow:true// 轻微阴影提升立体感},title:{text:2024年浏览器市场份额,style:{fontWeight:bold,fontSize:22px}},subtitle:{text:数据来源StatCounter},tooltip:{pointFormat:b{point.percentage:.1f}%/b,// 显示百分比percentageDecimals:1},accessibility:{point:{valueSuffix:%}},plotOptions:{pie:{allowPointSelect:true,// 允许点击选中扇区cursor:pointer,// 鼠标悬停显示手型borderRadius:5,// 扇区圆角dataLabels:{enabled:true,// 显示标签format:b{point.name}/bbr{point.percentage:.1f}%,distance:30,// 标签距离扇区距离style:{fontSize:14px}},showInLegend:true// 显示图例可选}},series:[{name:市场份额,colorByPoint:true,// 每个扇区自动不同颜色data:[{name:Chrome,y:64.8,sliced:true,// 突出显示该扇区selected:true},{name:Safari,y:19.8},{name:Edge,y:5.3},{name:Firefox,y:4.2},{name:其他,y:5.9}]}]});/script/body/html2. 环形饼图Donut Chart——最常用变体只需在plotOptions.pie中添加innerSize即可实现环形效果plotOptions:{pie:{innerSize:50%,// 关键内圈大小50%~70% 常见depth:45,// 可选增加厚度类似3D效果dataLabels:{enabled:true,distance:-50,// 标签放在内圈format:b{point.name}/b: {point.percentage:.1f}%,style:{fontWeight:bold}}}},// 可在中心显示总值center:[50%,50%],// 额外添加中心文本需自定义events:{render:function(){// 自定义中心文本示例可选letrendererthis.renderer;lettotalthis.series[0].data.reduce((sum,point)sumpoint.y,0);if(!this.totalText){this.totalTextrenderer.text(总计brb100%/b,this.plotWidth/2,this.plotHeight/2).css({fontSize:20px,textAnchor:middle}).add();}}}3. 半圆饼图Semi-circle Donutchart:{type:pie,options3d:{enabled:false}},plotOptions:{pie:{innerSize:50%,startAngle:-90,// 从顶部开始endAngle:90,// 只画半圆center:[50%,75%]// 下移中心位置}}4. 3D 饼图需额外引入模块scriptsrchttps://code.highcharts.com/highcharts-3d.js/scriptchart:{type:pie,options3d:{enabled:true,alpha:45,// 垂直倾斜角beta:0,depth:50// 厚度}},plotOptions:{pie:{depth:50}}5. 常用配置总结配置项说明与推荐值chart.type‘pie’plotOptions.pie.innerSize‘0%’实心 / ‘40%-70%’环形plotOptions.pie.dataLabels{ enabled: true }强烈推荐开启series.colorByPointtrue自动分配颜色point.sliced/selected突出某个扇区plotOptions.pie.startAngle/endAngle控制饼图旋转角度和范围半圆常用饼图数据必须是单系列且各点 y 值总和最好为 100Highcharts 会自动计算百分比。如果你需要多层嵌套环形图variable pie点击钻取子饼图drilldown自定义颜色主题在 Vue/React 中的封装方式告诉我具体需求我可以提供完整代码示例