最近项目中用到了雷达图，自己在那鼓捣了一顿总算出来一个雏形，跟大家分享下。需要用到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路径设置成对的，呵呵
相关推荐
Java和Highcharts结合实现折线图
使用Highcharts实现的图形报表，各种柱形对比图，柱形级别图，单一柱形图，各种功能。
Highcharts 写 venn图 （韦恩图），以及解决项目中venn的报错，Highcharts 写 venn图 鼠标悬浮效果以及点击事件
用highcharts实现从mysql数据库获取数据生成实时折线图。开发平台是用eclipse实现的，是一个项目，用jsp显示从数据库读取的实时折线图。
android 调用highcharts.js 实现折线图展示
本文实例讲述了jQuery插件HighCharts实现气泡图效果。分享给大家供大家参考，具体如下： 1、实例代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 气泡...
Highcharts 构建曲线图。最简单的一个例子。 最简单的代码，web项目，解压后直接导入运行即可
Highcharts柱状图显示，柱状图显示颜色不一样
使用highcharts实现饼图和曲线图的展示
Highcharts提供的Geojson世界地图数据集的国家名称中文翻译，Vue使用Highcharts实现世界地图的详细介绍来自我的另一篇文章，可供参考，有问题可随时联系，感谢支持： ...
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ，仪表图 ，会的 朋友 ，赐教一下！
由于项目需要对根据Highcharts的实例及大量的尝试， 改造出实时流量趋势图
做数据的图标显示，适合用highcharts.js插件来实现，可以做曲线图、柱状图、面积图等
javascript的实时趋势图，可用于asp.net
js画饼状图 柱状图 曲线图，实现中文描述，自定义模块名称，用Highcharts实现饼状图 柱状图 曲线图，可参开Highcharts开发文档
Highcharts几种简单的示例,仅供参考
highcharts柱状图