带着canvas去流浪系列之六 绘制雷达图
【摘要】 用canvas原生API实现百度Echarts基本图表。
示例代码托管在:http://www.github.com/dashnowords/blogs
一. 任务说明
使用原生canvasAPI
绘制雷达图。(截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。
二. 重点提示
雷达图
绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细节。
坐标转换
为了避免在绘制过程中不断根据夹角来计算某个数据点的坐标,我们可以让坐标系先移动到绘图中心,然后在绘制过程中逐步旋转并使用
context.lineTo(x,y)
来连线即可,这样做的好处是很明显的。比如在绘制背景六边形的时候,每次旋转后,路径点压根就不需要移动,直接在循环中每次都调用context.lineTo( )
方法连线至同一个数据点即可,看起来位移没有变,实际上随着坐标系的旋转,连线绕过的是多边形的轨迹。文字的对齐
为了让文字保持正常的方向,我们需要将坐标系的旋转恢复到初始状态再进行绘制。绘制的过程中可以根据绘制点和中心连线相对于x轴的角度来动态修改其绘制时的相对点(
left
,right
,center
),否则就会出现下图的结果,也就是文字区域的中心到图形中心的距离的确是一致的,但这并不是我们想要的效果。canvas坐标系
请时刻记得canvas坐标系的初始方向是x轴向右,y轴向下,和普通笛卡尔坐标系是不一样的,尤其是在旋转角度和坐标计算的时候,很容易出现和预期角度不相符的结果。
三. 示例代码
//options数据来自于百度Echarts官方示例库
start(options);/**
* 绘制图表
*/
function start(options) {drawBg(options);drawData(options);//绘制雷达图drawText(options);//绘制文字
}function drawBg(options) {let length = options.radar.indicator.length;let angleStep = -2 * Math.PI / length;context.strokeStyle="#b2b2b2";context.lineWidth = 1;//调整坐标系//移动中心点context.translate(500,300);//将x轴旋转至竖直向上context.rotate(-90 * 2 * Math.PI / 360);//每次以不同旋转半径绘制多个由大到小的图形for(let r = 200; r > 0 ; r -=40){//移动至第一个绘图点context.save();context.beginPath();context.moveTo(r,0);//转动坐标系绘制所有点for(let i = 0; i < length; i++){context.rotate(angleStep);context.lineTo(r,0);}context.closePath();context.stroke();//明暗色替换填充,此处从大到小切换颜色覆盖式绘制即可context.fillStyle = Math.round(r / 40) % 2 ? 'white':'#eaeaea';context.fill();context.restore();}
}/**
* 绘制数据
*/
function drawData(options) {//解构赋值拿到数据关键点let {radar:{indicator:indicators},series:[{data:data}]} = options;let colors = ['#c43e3a','#364c5a'];let length = indicators.length;let angleStep = -2 * Math.PI / length;for(let i = 0; i < data.length; i++){context.save();context.beginPath();context.moveTo(200 * data[i].value[0] / indicators[0].max,0);//遍历每组数据for(let j = 1; j < data[i].value.length; j++){context.rotate(angleStep);context.lineTo(200 * data[i].value[j] / indicators[j].max,0);}context.restore();context.lineTo(200 * data[i].value[0] / indicators[0].max,0);context.strokeStyle = colors[i];context.lineWidth = 2;context.stroke();}context.restore();
}//绘制文字
function drawText(options) {let {radar:{indicator:indicators}} = options;let length = indicators.length;let angleStep = 2 * Math.PI / length;let r = 220;context.fillStyle = 'black';context.font = "14px bold 黑体";context.textAlign = 'center';context.rotate(90 * Math.PI * 2 / 360);for(let i = 0; i < indicators.length; i++){let curAngle = -90*2*Math.PI/360 - angleStep*i;//根据方向调整文字的对齐点let cos = Math.cos(curAngle);if (Math.abs(cos) < 10e-4) {context.textAlign = 'center';}else if(cos > 0){context.textAlign = 'left';}else{context.textAlign = 'right';}console.log(indicators[i].name, Math.cos(curAngle))context.fillText(indicators[i].name, r * Math.cos(curAngle), r * Math.sin(curAngle));}
}
浏览器中可查看效果:
百度Echarts官方示例库中有这样一个雷达图的示例,展示了在雷达图上表现时间维度的示例,感兴趣的读者可以自行查看。
demo.rar
作者:大史不说话
带着canvas去流浪系列之六 绘制雷达图相关推荐
- 带着canvas去流浪系列之七 绘制水球图
[摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之五 绘制K线图
[摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之四 绘制散点图
[摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI ...
- 带着canvas去流浪系列之三 绘制饼图
一. 任务说明 使用原生canvasAPI绘制饼图(南丁格尔玫瑰). 二. 重点提示 南丁格尔玫瑰图的画法有很多种,Echarts中提供的以半径或面积两种不同模式,本文中以面积比例画法为例,绘制算法如 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之八 碰撞
[摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生A ...
- 带着canvas去流浪系列之一:绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...
- 带着canvas去流浪系列之九 粒子动画
[摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...
- 【带着canvas去流浪(6)】绘制雷达图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
最新文章
- java实现将String的数字提取出来
- 织梦html编辑器有问题怎么办,dede 织梦编辑框显示不出来的问题
- PHP array_combine
- 自旋表达的到底是什么?
- 机器学习——KNN实现
- 骑士 java_在递归骑士之旅中正确声明变量(Java作业)
- java中formfile,基于Struts FormFile上传文件
- 算法 - 二分查找(非递归实现二分查找)
- android 界面绘制完毕,几种获取android 界面性能数据的快捷方法
- micropython做产品开发_关于MicroPython是否可以真正用在产品开发的讨论
- 【论文笔记】Neural Graph Collaborative Filtering
- Vue-CLI搭建Vue项目
- [译]利用贝叶斯推理做硬件故障率的准实时预测
- 275页PDF:《编写高质量代码:改善Python程序的91个建议》
- the little schemer 笔记(1)
- GoLang - Go中Mocking(1)
- persevere的用法_努力奋斗的英文短语 努力的英文意思是
- 入行 AI,如何选个脚踏实地的岗位
- 扫地机器人灰尘堵住_为什么扫地机器人每天都能扫出很多灰尘?介绍最实用的扫地机器人...
- python mk趋势检验_时序数据常用趋势检测方法