最近項目中需要前端某頁面資料做成雷達效果圖,記錄一下
需要引入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>
★★★★★★★★★★★★原文文章★★★★★★★★★★★★★