highcharts实现雷达图效果 博客分类： javascript js雷达图
程序员文章站
2024-03-21 19:38:22
...
最近项目中用到了雷达图，自己在那鼓捣了一顿总算出来一个雏形，跟大家分享下。需要用到jquery.js和highcharts.js两个js。highcharts.js也可到highchart官网下载http://www.highcharts.com/下载。上面有highchart的具体用法。
以下是雷达图的主要代码
var mydData='80.0,78.0,65.0,70.0,77.0,92.0,100.0,64.0,60.0,58.0,91.0';
var width=-93;
var tagId='0';
var tagItem='B标签1_1,B标签2_2,B标签3_3,B标签4_4,B标签5_5,B标签6_6,B标签7_7,B标签8_8,B标签9_9,B标签10_10,B标签11_11';
/**---------------雷达图开始-----------------**/
//获取显示的数据---暂时没用上
function getMydData(tagNum){
var arr=mydData.split(",");
var dushu=Math.PI*2/tagNum;
var nowDushu=0;
var x=0;
var y=0;
var data="[";
for(var i=0;i<=tagNum;i++){
nowDushu=Math.PI/2+dushu*i;//Math.PI是90度的弧度
if(i==0){
x=Math.round(Math.cos(nowDushu)*arr[i]);
y=Math.round(Math.sin(nowDushu)*arr[i]);
data=data+"["+Math.round(Math.cos(nowDushu)*arr[i])+","+Math.round(Math.sin(nowDushu)*arr[i])+"]";
}else{
data=data+",["+Math.round(Math.cos(nowDushu)*arr[i])+","+Math.round(Math.sin(nowDushu)*arr[i])+"]";
}
}
data=data+",["+x+","+y+"]]";
return data;
}
/**
*画圆用的数据
*/
function getLeidaInitData(tagNum){
//[ [0, 100], [41, 92], [74, 67], [95, 31], [100, -10],[87, -50],[59, -81], [21, -98], [-21, -98], [-59, -81], [-87, -50],[-100, -10],[-100, -10],[-95, 31], [-74, 67], [-41, 92], [0, 100]]
var dushu=Math.PI*2/tagNum;
var nowDushu=0;
var data="[";
for(var i=0;i<=tagNum;i++){
nowDushu=Math.PI/2-dushu*i;//Math.PI是90度的弧度
if(i==0){
data=data+"["+Math.round(Math.cos(nowDushu)*100)+","+Math.round(Math.sin(nowDushu)*100)+"]";
}else{
data=data+",["+Math.round(Math.cos(nowDushu)*100)+","+Math.round(Math.sin(nowDushu)*100)+"]";
}
}
data=data+"]";
return data;
}
function getLeidaInitTag(tagNum){
var arr=new Array();
arr.push({name: 'up',color: '#757575',marker: {radius: 2},data:eval(getLeidaInitData(tagNum))});
var ldid=tagItem.split(",");
for(var i=0;i<ldid.length;i++){
arr.push( {name: ldid[i],data: [[Math.round(100*Math.cos(Math.PI/2+dushu*now)), Math.round(100*Math.sin(Math.PI/2+dushu*now++))], [0, 0]] });
}
arr.push({name: 's1',color: '#4572A7',shadow: true,marker: {radius: 4},data:eval(getMydData(tagNum))});
return arr;
}
$(document).ready(function() {
if($("#container").length>0){
leidaTu("container",-490,mydData,tagItem);
}
});
var tagNum=11;//标签个数
var dushu=(Math.PI*2)/tagNum;
var num=0;
var now=0;
function leidaTu(id,width,mydData,tagItem){
tagNum=tagItem.split(",").length;
dushu=(Math.PI*2)/tagNum;
num=0;
now=0;
chart = new Highcharts.Chart({
chart: {
renderTo: id,
defaultSeriesType: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
tickInterval:10, //坐标轴单位宽度
title: {
enabled: true,
text: ''
},
max: 120,
min: -110,
lineWidth: 0,
tickWidth: 0,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
max: 110,
min: -110,
gridLineWidth: 0,
lineWidth: 0,
tickWidth: 1,
offset: width,
labels: {
enabled: true,
formatter: function() {
return 0 <= this.value && 100 >= this.value ? this.value : '';
}
},
tickInterval:10,
title: {
text: ''
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
tooltip: {
formatter: function() {
try{
if((this.x!=0||this.y!=0)&&this.series.data[0].series.name.indexOf('B')==-1){
//return this.series.data[0].series.name;
return Highcharts.numberFormat(Math.sqrt((this.x*this.x)+(this.y*this.y)),0) ;
}else{
return '';
}
}catch(e){
return '';
}
}
},credits:{
position: {
align: 'center',
x: -10,
verticalAlign: 'bottom',
y: 0
},
text:''//图片下方显示的东西,点击可以跳转
},
legend: {
enabled: false,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 35,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
series: {
color:'#757575',
marker: {
radius: 2
},
lineWidth: 2,
shadow: false,
dataLabels: {
formatter: function() {
try{
if((this.x!=0||this.y!=0)&&this.series.data[0].series.name.indexOf('B')!=-1){
if(this.series.data[0].series.name==tagItem.split(",")[0]){
num=num+1;
}
if(num==1){
var tId=this.series.data[0].series.name.substring(this.series.data[0].series.name.indexOf('_')+1);
var classStr="";
if(tagId==tId){
classStr='class="b"';
}
return '<a href="javascript:toSubmit(\''+tId+'\');" '+classStr+' style="text-decoration:none;color:#757575;">'+this.series.data[0].series.name.substring(1,this.series.data[0].series.name.indexOf('_'))+'</a>';
}else{
return false;
}
}else{
return false;
}
}catch(e){
return false;
}
},
enabled: true
},
enableMouseTracking: true
}
},
series: getLeidaInitTag(tagNum)
});
}
function toSubmit(tid){
alert(tid);
}
页面上需要有一个div接受雷达图
页面代码是
<div id="container" style="width: 216px; height: 212px; margin: 0 auto"></div>
实现的效果图如下：
接下来把页面代码上传一下，记得把js路径设置成对的，呵呵
