ArcGISAPI+Echarts实现动态雷达图
雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），常用语财务报表中，但不限于财务报表。使用雷达图能让使用者能一目了然的了解各项指标的变动情形及其好坏趋向。
ECharts，商业级数据图表，一个纯script的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
利用Echart可以很容易的实现雷达图，我们可以先看看官网的雷达图示例
参照API，我们可以很容易理解，配置中：
title：图表标题
tooltip：提示框（默认即可）
legend：图例
radar：雷达图坐标系组件，只适用于雷达图
- indicator： 雷达图的指示器，用来指定雷达图中的多个变量（维度）
series：系列列表
- type：图表类型
- data：数据
很明显，要实现动态绘制雷达图，只要动态的修改data数据就行。
在ArcGIS API中我们可以通过点击获得要素后，动态绘制这个要素各项指标的雷达图
初始化雷达图
var myChart = echarts.init(document.getElementById('chart2'));
var option = {
tooltip: {},
// shape: 'circle',
indicator: [
{ name: '价格', max: 20000},
{ name: '便捷', max: 7},
{ name: '环境', max: 5},
{ name: '道路', max: 1000},
{ name: '公园', max: 3000},
{ name: '学校', max: 1000}
series: [{
type: 'radar',
myChart.setOption(option2);
点击获得要素加入雷达图
添加要素图层
var price=new FeatureLayer(&https://localhost:6080/arcgis/rest/services/zongheshuju/house73/MapServer/0&,{
outFields:[&*&]
map.addLayer(price);
监听要素图层点击事件,获得相应的graphic，然后实时向雷达图data数组中添加项目（也可以修改，这里为了达到多个graphic对比所以选择添加项目）
price.on(&click&,function(e){
var value={
value:[e.graphic.attributes.Ave_price,e.graphic.attributes.bianjie_ra,e.graphic.attributes.huanjrank,e.graphic.attributes.gandao_dis,e.graphic.attributes.gyuan_dist,e.graphic.attributes.xuex_dist],
name:e.graphic.attributes.Name
option.series[0].data.push(value);
myChart.setOption(option);HTML5 Canvas制作逼真的雷达扫描动画代码
当前位置： >
> HTML5 Canvas制作逼真的雷达扫描动画代码
一款利用html5的canvas api制作的逼真的雷达扫描动画，可自定义扫描圈的大小，整个代码十分小巧。
浏览器兼容性
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！个人博客转至：
无聊就想打码，打码使我快乐
随笔 - 160, 文章 - 0, 评论 - 67, 引用 - 0
老板要画雷达图，但是数据好多组怎么办？不能一个一个点excel去画吧，那么可以利用python进行批量制作，得到样式如下：
首先制作一个演示的excel，评分为excel随机数生成：
&1&=INT((RAND()+4)*10)/10&
加入标签等得到的excel样式如下(部分，共计32行)：
&那么接下来就是打开python写码了，本文是基于python3.4进行编写
1 wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指标.xlsx')
##读取路径
ws = wb.get_sheet_by_name("Sheet1")
##读取名字为Sheet1的sheet表
info_id = []
info_first = []
for row_A in range(2, 32):
## 遍历第2行到32行
id = ws.cell(row=row_A, column=1).value
## 遍历第2行到32行，第1列
info_id.append(id)
for col in range(2, 9):
##读取第1到9列
first = ws.cell(row=1, column=col).value
info_first.append(first)
##得到1到8列的标签
info_data = []
for row_num_BtoU in range(2, len(info_id) + 2):
## 遍历第2行到32行
row_empty = []
##建立一个空数组作为临时储存地，每次换行就被清空
for i in range(2, 9):
## 遍历第2行到32行，第2到9列
data_excel = ws.cell(row=row_num_BtoU, column=i).value
if data_excel == None:
row_empty.append(data_excel)
##将单元格信息储存进去
info_data.append(row_empty)
分步讲解：
读取excel表格：
1 　　wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指标.xlsx')
##读取路径
ws = wb.get_sheet_by_name("Sheet1")
##读取名字为Sheet1的sheet表
需要用到库：
&1 import xlsxwriter&
&1 from openpyxl import load_workbook&
在命令指示符下输入：
&1 pip install xlsxwriter&
等待安装即可，后面的库也是如此：
将第一列ID储存，以及第一行的标签，标签下面的数值分别储存在：
info_id = []
info_first = []
info_data = []
读取数据后接下来需要设置写入的格式：
1 workbook = xlsxwriter.Workbook('C:\\Users\\Administrator\\Desktop\\result.xlsx')
worksheet = workbook.add_worksheet()
# 创建一个工作表对象
font = workbook.add_format(
{'border': 1, 'align': 'center', 'font_size': 11, 'font_name': '微软雅黑'})
##字体居中，11号，微软雅黑,给一般的信息用的
#写下第一行第一列的标签
worksheet.write(0, 0, '商品货号', font)
##设置图片的那一列宽度
worksheet.set_column(0, len(info_first) + 1, 11)
# 设定第len(info_first) + 1列的宽度为11
将标签数据等写入新的excel表格中：
1 #新建一个excel保存结果
workbook = xlsxwriter.Workbook('C:\\Users\\Administrator\\Desktop\\result.xlsx')
worksheet = workbook.add_worksheet()
# 创建一个工作表对象
font = workbook.add_format(
{'border': 1, 'align': 'center', 'font_size': 11, 'font_name': '微软雅黑'})
##字体居中，11号，微软雅黑,给一般的信息用的
#写下第一行第一列的标签
worksheet.write(0, 0, '商品货号', font)
##设置图片的那一列宽度
worksheet.set_column(0, len(info_first) + 1, 11)
# 设定第len(info_first) + 1列的宽度为11
##写入标签
for k in range(0,7):
worksheet.write(0, k + 1, info_first[k], font)
#写入最后一列标签
worksheet.write(0, len(info_first) + 1, '雷达图', font)
制作雷达图：
#设置雷达各个顶点的名称
labels = np.array(info_first)
data_len = len(info_first)
for i in range(0,len(info_id)):
data = np.array(info_data[i])
angles = np.linspace(0, 2*np.pi, data_len, endpoint=False)
data = np.concatenate((data, [data[0]])) # 闭合
angles = np.concatenate((angles, [angles[0]])) # 闭合
fig = plt.figure()
ax = fig.add_subplot(111, polar=True)# polar参数！！
ax.plot(angles, data, 'bo-', linewidth=2)# 画线
ax.fill(angles, data, facecolor='r', alpha=0.25)# 填充
ax.set_thetagrids(angles * 180/np.pi, labels, fontproperties="SimHei")
ax.set_title("商品货号：" + str(info_id[i]), va='bottom', fontproperties="SimHei")
ax.set_rlim(3.8,5)# 设置雷达图的范围
ax.grid(True)
plt.savefig("C:\\Users\\Administrator\\Desktop\\result\\商品货号：" + str(info_id[i]) + ".png", dpi=120)
图片太大怎么办？用库改变大小即可：
import Image
##更改图片大小
infile = &C:\\Users\\Administrator\\Desktop\\result\\商品货号：" + str(info_id[i]) + ".png&
outfile = &C:\\Users\\Administrator\\Desktop\\result1\\商品货号：" + str(info_id[i]) + ".png&
im = Image.open(infile)
(x, y) = im.size
y_s = 100　 ## 设置宽
out = im.resize((x_s, y_s), Image.ANTIALIAS)
out.save(outfile,'png',quality = 95)
将大图片和小图片放在了result和result1两个不同的文件夹，需要再前边创建这两个文件夹：
if os.path.exists(r'C:\\Users\\Administrator\\Desktop\\result'):
# 建立一个文件夹在桌面，文件夹为result
print('result文件夹已经在桌面存在，继续运行程序&&')
print('result文件夹不在桌面，新建文件夹result')
os.mkdir(r'C:\\Users\\Administrator\\Desktop\\result')
print('文件夹建立成功，继续运行程序')
if os.path.exists(r'C:\\Users\\Administrator\\Desktop\\result1'):
# 建立一个文件夹在C盘，文件夹为result1
print('result1文件夹已经在桌面存在，继续运行程序&&')
print('result1文件夹不在桌面，新建文件夹result1')
os.mkdir(r'C:\\Users\\Administrator\\Desktop\\result1')
print('文件夹建立成功，继续运行程序')
最后插入图片到excel中：
worksheet.insert_image(i + 1, len(info_first) + 1, 'C:\\Users\\Administrator\\Desktop\\result1\\' + "商品货号：" + str(info_id[i]) + '.png')
##写入图片
time.sleep(1)##防止写入太快电脑死机
plt.close() #
一定要关掉图片，不然python打开图片20个后会崩溃
workbook.close()#最后关闭excel
得到的效果如下：
&附上完整代码：
1 import numpy as np
2 import matplotlib.pyplot as plt
3 import xlsxwriter
4 from openpyxl import load_workbook
5 import os
6 import time
7 from PIL import Image
9 if __name__ == '__main__':
if os.path.exists(r'C:\\Users\\Administrator\\Desktop\\result'):
# 建立一个文件夹在桌面，文件夹为result
print('result文件夹已经在桌面存在，继续运行程序&&')
print('result文件夹不在桌面，新建文件夹result')
os.mkdir(r'C:\\Users\\Administrator\\Desktop\\result')
print('文件夹建立成功，继续运行程序')
if os.path.exists(r'C:\\Users\\Administrator\\Desktop\\result1'):
# 建立一个文件夹在C盘，文件夹为result1
print('result1文件夹已经在桌面存在，继续运行程序&&')
print('result1文件夹不在桌面，新建文件夹result1')
os.mkdir(r'C:\\Users\\Administrator\\Desktop\\result1')
print('文件夹建立成功，继续运行程序')
wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指标.xlsx')
##读取路径
ws = wb.get_sheet_by_name("Sheet1")
##读取名字为Sheet1的sheet表
info_id = []
info_first = []
for row_A in range(2, 32):
## 遍历第2行到32行
id = ws.cell(row=row_A, column=1).value
## 遍历第2行到32行，第1列
info_id.append(id)
for col in range(2, 9):
##读取第1到9列
first = ws.cell(row=1, column=col).value
info_first.append(first)
##得到1到8列的标签
print(info_id)
print(info_first)
info_data = []
for row_num_BtoU in range(2, len(info_id) + 2):
## 遍历第2行到32行
row_empty = []
##建立一个空数组作为临时储存地，每次换行就被清空
for i in range(2, 9):
## 遍历第2行到32行，第2到9列
data_excel = ws.cell(row=row_num_BtoU, column=i).value
if data_excel == None:
row_empty.append(data_excel)
##将单元格信息储存进去
info_data.append(row_empty)
print(info_data)
print(len(info_data))
# 设置雷达各个顶点的名称
labels = np.array(info_first)
# 数据个数
data_len = len(info_first)
# 新建一个excel保存结果
workbook = xlsxwriter.Workbook('C:\\Users\\Administrator\\Desktop\\result.xlsx')
worksheet = workbook.add_worksheet()
# 创建一个工作表对象
# 字体格式
font = workbook.add_format(
{'border': 1, 'align': 'center', 'font_size': 11, 'font_name': '微软雅黑'})
##字体居中，11号，微软雅黑,给一般的信息用的
# 写下第一行第一列的标签
worksheet.write(0, 0, '商品货号', font)
##设置图片的那一列宽度
worksheet.set_column(0, len(info_first) + 1, 11)
# 设定第len(info_first) + 1列的宽度为11
##写入标签
for k in range(0, 7):
worksheet.write(0, k + 1, info_first[k], font)
# 写入最后一列标签
worksheet.write(0, len(info_first) + 1, '雷达图', font)
# 将其他参数写入excel中
for j in range(0, len(info_id)):
worksheet.write(j + 1, 0, info_id[j], font)
# 写入商品货号
worksheet.set_row(j, 76)
##设置行宽
for x in range(0, len(info_first)):
worksheet.write(j + 1, x + 1, info_data[j][x], font)
# 写入商品的其他参数
for i in range(0, len(info_id)):
data = np.array(info_data[i])
angles = np.linspace(0, 2 * np.pi, data_len, endpoint=False)
data = np.concatenate((data, [data[0]]))
angles = np.concatenate((angles, [angles[0]]))
fig = plt.figure()
ax = fig.add_subplot(111, polar=True)
# polar参数！！
ax.plot(angles, data, 'bo-', linewidth=2)
ax.fill(angles, data, facecolor='r', alpha=0.25)
ax.set_thetagrids(angles * 180 / np.pi, labels, fontproperties="SimHei")
ax.set_title("商品货号：" + str(info_id[i]), va='bottom', fontproperties="SimHei")
ax.set_rlim(3.8, 5)
# 设置雷达图的范围
ax.grid(True)
plt.savefig("C:\\Users\\Administrator\\Desktop\\result\\商品货号：" + str(info_id[i]) + ".png", dpi=120)
# plt.show()在python中显示
##更改图片大小
infile = "C:\\Users\\Administrator\\Desktop\\result\\商品货号：" + str(info_id[i]) + ".png"
outfile = "C:\\Users\\Administrator\\Desktop\\result1\\商品货号：" + str(info_id[i]) + ".png"
im = Image.open(infile)
(x, y) = im.size
out = im.resize((x_s, y_s), Image.ANTIALIAS)
out.save(outfile, 'png', quality=95)
worksheet.insert_image(i + 1, len(info_first) + 1,
'C:\\Users\\Administrator\\Desktop\\result1\\' + "商品货号：" + str(
info_id[i]) + '.png')
##写入图片
time.sleep(1)
##防止写入太快电脑死机
plt.close()
# 一定要关掉图片，不然python打开图片20个后会崩溃
workbook.close()
# 最后关闭excel
我就会升职加薪
当上总经理
迎娶白富美
走上人生巅峰运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
雷达图开发（设计说明）
雷达图开发（背景层开发）
var H5ComponentRadar =function ( name, cfg ) {
var component =
new H5ComponentBase( name ,cfg );
var w = cfg.
var h = cfg.
var cns = document.createElement('canvas');
var ctx = cns.getContext('2d');
cns.width = ctx.width =
cns.height = ctx.height =h;
component.append(cns);
var r = w/2;
var step = cfg.data.
var isBlue = false;
for( var s = 10;s &0 ;s--){
ctx.beginPath();
for( var i=0;i&i++){
rad = ( 2*Math.PI / 360 ) * ( 360 / step ) *
var x = r + Math.sin( rad ) * r * (s/10);
var y = r + Math.cos( rad ) * r * (s/10);
ctx.lineTo(x,y);
ctx.closePath();
ctx.fillStyle = (isBlue = !isBlue) ? '#99c0ff' : '#f1f9ff';
ctx.fill();
for(var i = 0;i&i++){
rad = ( 2*Math.PI / 360 ) * ( 360 / step ) *
var x = r + Math.sin( rad ) *
var y = r + Math.cos( rad ) *
ctx.moveTo(r,r);
ctx.lineTo(x,y);
var text = $('&div class="text"&');
text.text( cfg.data[i][0] );
text.css('transition','all .5s '+ i*.1 + 's');
if( x & w/2 ){
text.css('left',x/2+5);
text.css('right',(w-x)/2+5);
if( y & h/2){
text.css('top',y/2+5);
text.css('bottom',(h-y)/2+5);
if( cfg.data[i][2] ){
text.css('color',cfg.data[i][2])
text.css('opacity',0);
component.append(text);
ctx.strokeStyle = '#e0e0e0';
ctx.stroke();
雷达图开发（数据层开发）
var cns = document.createElement('canvas');
var ctx = cns.getContext('2d');
cns.width = ctx.width =
cns.height = ctx.height =h;
component.append(cns);
ctx.strokeStyle = '#f00';
var draw = function( per ){
if(per &= 1){
component.find('.text').css('opacity',0);
if(per &= 1){
component.find('.text').css('opacity',1);
ctx.clearRect(0,0,w,h);
for(var i=0;i&i++){
var rad = ( 2*Math.PI / 360 ) * ( 360 / step ) *
= cfg.data[i][1] *
var x = r + Math.sin( rad ) * r *
var y = r + Math.cos( rad ) * r *
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = '#ff7676';
for(var i=0;i&i++){
var rad = ( 2*Math.PI / 360 ) * ( 360 / step ) *
= cfg.data[i][1] *
var x = r + Math.sin( rad ) * r *
var y = r + Math.cos( rad ) * r *
ctx.beginPath();
ctx.arc(x,y,5,0,2*Math.PI);
ctx.fill();
ctx.closePath();
雷达图开发（项目文本修订 ，生长动画）
component.on('onLoad',function(){
var s = 0;
for( i=0;i&100;i++){
setTimeout(function(){
},i*10+500);
component.on('onLeave',function(){
var s = 1;
for( i=0;i&100;i++){
setTimeout(function(){
&!DOCTYPE html&
charset="UTF-8"/&
name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"&
&IT教育网2015课程学习情况&
type="text/css"&
margin: 0;
padding: 0;
background-color: #000;
font-size: 12px;
width: 340px;
height: 540px;
background-color: #fff;
position: absolute;
left: 50%;
margin: -270px 0 0 -170px;
type="text/javascript" src="../js/lib/jquery.js"&&
type="text/javascript" src="../js/H5ComponentBase.js"&&
rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css" /&
type="text/javascript" src="../js/H5ComponentRadar.js"&&
rel="stylesheet" type="text/css" href="../css/H5ComponentRadar.css" /&
class="iphone"&
type="text/javascript"&
var cfg = {
type : 'radar',
width : 400,
height : 400,
['Js' , .4
,'#ff7676'],
['CSS3' , .1 ],
['HTML5' , .2
['PHP' , .05
['jQuery' , .35 ]
animateIn:{
opacity:1,
animateOut:{
opacity:0,
center : true,
var h5 = new H5ComponentRadar('myPolyline',cfg);
$('.iphone').append(h5);
var leave = true;
$('body').click(function(){
$('.h5_component').trigger( leave ? 'onLeave' : 'onLoad');
.h5_component_radar{
.h5_component_radar {
position: absolute;
width: 100%;
height: 100%;
.h5_component_radar .text{
position: absolute;
font-size: 12px;
transition:all 1s;
HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。下面，用HTML5的Cavas来实现雷达图。效果一、创建Canvasvar mW = 4...
jQuery 图表插件 jqChart 使用绘制雷达图
转载：http://blog.csdn.net/leixiaohua1020/article/details/
可见支持的种类非常之多。在这里我们使用一下Radar Area C...
echarts图表库 实现简单 雷达图
1.下载js文件
http://echarts.baidu.com/download.html2.核心代码
技能雷达图
之前在搜索一些资料的时候，发现开源中国这个博客网站有一大亮点。那就是一张技能雷达图。大致如下：
但是遗憾的是CSDN官方并不支持这一实现，其实对于技能雷达图而言，言简意赅的能表现出一个技术者擅长的领...
效果图：gif图：代码：&!DOCTYPE html&
&meta ch...
&!--雷达图--&
&!-- 自定义地图开始， mapcontainer是一个半透明容器container，...
雷达图算得上是颜值较高的一个图表类型了，它是一种以二维形式展示多维数据的图形。它可以描述为线图，X轴以折叠形式环绕360度，Y轴表示每一个 X 轴上的值。由中心向外辐射出多条坐标轴，每个多维数据在每一...
#简介最近因为项目需求,要实现一款&em&雷达图&/em&来表示用户的各种成就值&em&雷达图&/em&的绘制很简单,只要思路清晰按部就班的绘制就可以了,其中使用得最多,是**路径path类**的...
神器！！!简单一步就可以实现雷达图
背景：本人已使用BDP个人版两个月，现在基本上做非常复杂的图10分钟也能完成，具体的好处我也不多说了，大家可以自己度娘。
下面我就讲下一分钟做雷达图这项技能！
首先我今天要展示分析的是12星座的各项指...
没有更多推荐了，HTML5Canvas制作雷达图实战
HTML5Canvas制作雷达图实战。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。
下面，用HTML5的Cavas来实现雷达图。
一、创建Canvas
var mW = 400;
var mH = 400;
var mCtx =
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
二、制作多边形背景
var mCount = 6; //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mC //角度
var mColorPolygon = '#B8B8B8'; //多边形颜色
// 绘制多边形边
function drawPolygon(ctx){
ctx.save();
ctx.strokeStyle = mColorP
var r = mRadius/ mC //单位半径
for(var i = 0; i & mC i ++){
ctx.beginPath();
var currR = r * ( i + 1); //当前半径
for(var j = 0; j & mC j ++){
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
ctx.closePath()
ctx.stroke();
ctx.restore();
三、连接顶点线
var mColorLines = '#B8B8B8'; //顶点连线颜色
//顶点连线
function drawLines(ctx){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorL
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
ctx.stroke();
ctx.restore();
四、绘制数据文本
var mData = [['速度', 77],
['力量', 72],
['防守', 46],
['射门', 50],
['传球', 80],
['耐力', 60]]; //数据
var mColorText = '#;;
//绘制文本
function drawText(ctx){
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorT
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
//通过不同的位置，调整文本的显示位置
if( mAngle * i &= 0 && mAngle * i &= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i & Math.PI / 2 && mAngle * i &= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i & Math.PI && mAngle * i &= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
ctx.fillText(mData[i][0], x, y);
ctx.restore();
五、绘制数据覆盖区域
//绘制数据区域
function drawRegion(ctx){
ctx.save();
ctx.beginPath();
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.restore();
六、绘制数据点
把每个数据与线的焦点绘制出来。
function drawCircle(ctx){
ctx.save();
var r = mCenter / 18;
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
ctx.restore();
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
&style type=&text/css&&
&script type=&text/javascript&&
var mW = 400;
var mH = 400;
var mData = [['速度', 77],
['力量', 72],
['防守', 46],
['射门', 50],
['传球', 80],
['耐力', 60]];
var mCount = mData. //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mC //角度
var mCtx =
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#;;
(function(){
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
// 绘制多边形边
function drawPolygon(ctx){
ctx.save();
ctx.strokeStyle = mColorP
var r = mRadius/ mC //单位半径
for(var i = 0; i & mC i ++){
ctx.beginPath();
var currR = r * ( i + 1); //当前半径
for(var j = 0; j & mC j ++){
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
ctx.closePath()
ctx.stroke();
ctx.restore();
//顶点连线
function drawLines(ctx){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorL
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
ctx.stroke();
ctx.restore();
//绘制文本
function drawText(ctx){
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorT
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if( mAngle * i &= 0 && mAngle * i &= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i & Math.PI / 2 && mAngle * i &= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i & Math.PI && mAngle * i &= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
ctx.fillText(mData[i][0], x, y);
ctx.restore();
//绘制数据区域
function drawRegion(ctx){
ctx.save();
ctx.beginPath();
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.restore();
function drawCircle(ctx){
ctx.save();
var r = mCenter / 18;
for(var i = 0; i & mC i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
ctx.restore();