highchars蜘蛛网图---多层蛛网---最大值在最外层网
程序员文章站
2022-05-30 08:22:20
...
效果图
HTML中引入的其中的highcharts.js和highcharts-more.js都是从官网实例中保存,设置tickInterval刻度间隔后,最大值及在最外层蛛网处
https://www.hcharts.cn/demo/highcharts/polar-spider
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<div id="container02" style="height: 250px;margin: 20px auto"></div>
Highcharts.chart('container02', {
chart: {
polar: true,
type: 'area'
},
title: {
text: '',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['技术/职能型', '综合管理型', '自主/独立型', '安全/稳定型',
'创业创新型', '服务/奉献型', '纯粹挑战型', '生活方式型'],
tickmarkPlacement: 'on',
lineWidth: 0
},
credits: {
enabled: false // 禁用版权信息
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 25,
tickInterval: 5 //设置刻度间隔
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 50,
layout: 'vertical'
},
series: [{
showInLegend: false,
name: '',
data: [4, 20, 9, 15, 17, 5, 13, 25],
pointPlacement: 'on'
}]
});