原标题:超实用! HTML5的canvas画布实现可视化图表
随着移动端的需求,canvas 强大的功能让它成为了 HTML5 中非常重要的部分,可视化图表,则是 canvas 强大功能的表现之一。
现在已经有了很多成熟的图表插件都是用 canvas 实现的,Chart.js、ECharts等可以制作出好看炫酷的图表,而且几乎覆盖了所有图表的实现。
有时候自己只想画个柱状图,自己写又觉得麻烦,用别人插件又感觉累赘,最后打开搜索引擎,拷段代码,粘贴上来修修改改,虽然这样实现起来非常的速度和不用太多的逻辑思维。但是毕竟复制的还是别人的东西,所以还是靠自己多撸码好一点!
效果图展示:
由于是截图的,动态效果图片就显示不出来了,大家伙懂就好!一般见过那些数据统计图表网站的都知道动态的图表是怎么运动的!
分析实现原理:
这个图表由XY轴、数据条形和标题组成。
轴线:可以使用moveTo()&line To()实现
文字:可以使用 fillText() 实现
长方形:可以使用 fillRect() 实现
实现方法:
先定义画布:
canvas 标签只是个容器,真正实现画图的还是 Java。
画坐标轴:
坐标轴就是两条横线,也就是canvas里最基础的知识。
由 ctx.beginPath() 开始一条新的路径
ctx.lineWidth=1 设置线条宽度
ctx.strokeStyle='#000000' 设置线条颜色
ctx.moveTo(x,y) 定义线条的起点
ctx.lineTo(x1,y1) 定义线条的终点
最后 ctx.stroke() 把起点和终点连成一条线
画坐标点:
y轴上多少坐标点由自己来定义,需要获取到数据的最大值来计算y轴上的坐标值。x轴的点则由传入的数据长度决定,坐标值由传入数据的 xAxis 属性决定。
坐标值就是文字,由 ctx.fillText(value, x, y) 填充文字,value 为文字值,x y 为值的坐标
ctx.textAlign='center' 设置文字居中对齐
ctx.fillStyle='#000000' 设置文字填充颜色
动画实现:
接下来要把数据通过柱状的高低显示出来,这里有个动画效果,柱状会从0升到对应的值。在 canvas 上实现动画我们可以使用 setInterval、setTimeout 和 requestAnimationFrame。
requestAnimationFrame 不需要自己设置定时时间,而是跟着浏览器的绘制走。这样就不会掉帧,自然就流畅。requestAnimationFrame 原本只支持IE10以上,不过可以通过兼容的写法实现兼容到IE6都行。
柱状即是画矩形,由 ctx.fillRect(x, y, width, height) 实现,x y 为矩形左上角的坐标,width height 为矩形的宽高,单位为像素
ctx.fillStyle='#1E9FFF' 设置填充颜色
一个最基本的柱状图就完成了。接下来,我们可以为他添加标题。
添加标题:
要放置标题,就会发现我们一大早定义的 padding 内边距确实有用,总不能把标题给覆盖到柱状图上吧。但是标题有的是在顶部,有的在底部,那么就不能写死了。定一个变量 position 来判断位置去画出来。这个简单。
添加鼠标移动事件:
有些图表,把鼠标移上去,当前的柱状就变色了,移开之后又变回原来的颜色。这里就需要监听 mouseover 事件,当鼠标的位置位于柱状的面积内,触发事件。
那我怎么知道在柱状里啊,发现在 drawAnimation() 里会有每个柱状的坐标,那我干脆把坐标给保存到 data 里。那么鼠标在柱状里的条件应该是:
ev.offsetX > data[i].left
ev.offsetX < data[i].right
ev.offsetY > data[i].top
ev.offsetY < data[i].bottom
责任编辑: