最近项目中需要前端某页面数据做成雷达效果图,记录一下
需要引入3个JS
- jquery-1.9.1.min.js
- highcharts.js
- highcharts-more.js
//前台需要展示的div
<div id="credit_radarmap"></div>
<script>
$('#credit_radarmap').highcharts({
chart : {
polar : true,
type : 'area'
},
title : {
text : '',
x : -80
},
credits : {
enabled : false
},
exporting : {
enabled : false
},
pane : {
size : '82%'
},
xAxis : {
categories : [
'个人情况15分<br/>满分18',
'信用记录25分<br/>满分35',
'经济实力30分<br/>满分32',
'稳定情况9分<br/>满分16',
'贷款情况14分<br/>满分27',
'其他0分<br/>满分90',
'保障情况18分<br/>满分18',
'家庭情况18分<br/>满分18',
'工作情况22分<br/>满分36'
],
tickmarkPlacement : 'on',
lineWidth : 0,
labels: {
align : 'center',
rotation: 3
}
},
yAxis : {
gridLineInterpolation : 'polygon',
lineWidth : 0.2,
minorTickInterval : 10,
min : 0,
endOnTick : false,
max : 100,
labels: {
format: '{value} 分'
}
},
tooltip : {
shared : true,
pointFormat : ''
},
legend : {
align : 'left',
verticalAlign : 'top',
x : 2,
y : 5,
layout : 'vertical'
},
plotOptions: {
area: {
marker: {
radius: 0
}
}
},
series : [ {
name : '总分151分',
color:'rgb(250,160,3)',
data :
[
15/18*100,25/35*100,30/32*100,9/16*100,14/27*100,0/90*100,18/18*100,18/18*100,22/36*100
],
pointPlacement : 'on'
} ]
});
</script>