最近项目中用到了雷达图，自己在那鼓捣了一顿总算出来一个雏形，跟大家分享下。需要用到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路径设置成对的，呵呵
相关推荐
Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果。它支持多种图表类型，如散点图、区域图、柱状图、折线图和饼状图等，且具有高度自定义和交互性。下面我们将详细介绍这些图表类型...
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ，仪表图 ，会的 朋友 ，赐教一下！
- 雷达图（Radar）：多维度数据的展示。 - 漏斗图（Funnel）：展示销售漏斗或其他流程的阶段。 8. **自定义主题**：Highcharts允许自定义颜色方案和样式，创建符合品牌形象的图表。 9. **响应式设计**：...
3. **丰富的图表类型**：包括折线图、面积图、柱状图、条形图、饼图、散点图、雷达图、极坐标图等，满足各种数据展示需求。 4. **强大的交互性**：用户可以通过点击、悬浮、缩放等操作与图表互动，例如选择特定区间...
JavaScript（简称JS）作为浏览器端最常用的语言，提供了丰富的库和框架用于创建各种图表，如曲线图、报表、柱状图、饼图和雷达图。这些图表有助于将复杂的数据以直观、易于理解的方式呈现出来，对于业务分析、决策...
4. 雷达图、极坐标图：对于特定的数据结构，Highcharts提供了雷达图和极坐标图，适用于多维度或多角度的数据展示。 5. 高级交互：通过事件监听器，可以响应用户操作，如点击图表元素、缩放图表等，实现更复杂的交互...
5. 雷达图、极坐标图、水波图等特殊图表类型，满足更多场景需求。 学习《网页图表Highcharts实践教程基础篇》不仅可以掌握基本的图表绘制，还能深入理解Highcharts的各种配置和交互特性，从而在实际项目中灵活运用...
6. **高级特性**：深入学习高级图表类型，如热力图、雷达图、散点图等，以及高级特性如 Drilldown（下钻）、数据列组、时间序列数据等。 7. **性能优化**：理解如何优化大量数据的加载和渲染，以提高图表性能。 8....
7. 雷达图（Radar charts）：多维度数据的比较。 8. 极坐标图（Polar charts）：适用于环形数据分布。 此外，Highcharts还具有以下特点： - 交互性：用户可以通过鼠标悬停、点击等交互方式查看详细数据或触发其他...
折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。 inverted图表或坐标轴反转 Highcharts 支持图表反转（X 轴或 Y轴对调），这样 X轴是垂直的，方便进行数据对比；坐标轴旋转则可以坐标轴...
3. **丰富的图表类型**：除了基础的柱状图、折线图、饼图，Highcharts还提供面积图、桑基图、热力图、雷达图等多种图表，满足各种数据分析展示需求。 4. **高度可定制化**：颜色、样式、数据标签、图例、工具提示等...
这通常涉及到使用图表库，如ECharts、Highcharts、D3.js等，来帮助我们创建直观、吸引人的饼状图、柱状图、折线图和雷达图。这些图形能够有效地展示数据，使用户更容易理解和分析信息。 1. **饼状图**：饼状图是...
JavaScript作为一种广泛使用的前端编程语言，提供了许多库和框架来创建各种图表，如柱状图、饼图、曲线图和雷达图。这些图表是报表的重要组成部分，帮助用户直观地理解复杂的数据。 **柱状图**（Bar Chart）： 柱状...
7. 雷达图（Polar Charts）：多角度比较各个类别的表现。 8. 地图（Map Charts）：用于地理数据的可视化，可以创建交互式的世界地图或区域地图。 Highcharts的特点和优势： 1. 兼容性：Highcharts支持所有主流的...
- **图表类型**：包括折线图、柱状图、饼图、面积图、散点图等，以及它们的组合形式，如雷达图、瀑布图等。 - **事件处理**：如点击图表元素触发的事件，以及自定义事件监听器。 - **交互性**：如工具提示、缩放、平...
1. **丰富的图表类型**：HighCharts支持多种图表类型，包括折线图、面积图、柱状图、饼图、条形图、散点图、气泡图、雷达图、热力图等，满足不同数据展示需求。 2. **高度自定义**：你可以调整图表的颜色、大小、...
蜘蛛图（Spider Web Chart），又称雷达图，用于多维数据的展示。在Highcharts中，蜘蛛图通过`type: 'polygon'`来实现，`polar: true`开启极坐标系统。`xAxis`和`yAxis`的设置与非极坐标图有所不同，它们会自动处理成...
雷达图和条形图是两种常见的数据可视化工具，在数据分析和信息展示中有着广泛的应用。...在这个项目中，开发者提供了一个不依赖JSON文件的交互式雷达图和条形图实现，这为理解和自定义此类图表提供了宝贵的学习材料。