一、认识Canvas图表
最近研究了下百度Echarts，发现他们没用SVG而是用了Canvas。这东西真牛，大数据都不是事儿！于是我也想试试Canvas，试着搞个超强的图表库出来。先从简单的柱状图开始，检验下Canvas的实力。
二、Canvas图表的优势
Canvas真的太给力了！特别适合处理海量数据，速度简直跟玩游戏一样顺畅。记得之前用ECharts绘制复杂数据图时，真的感受到了Canvas画布上直接绘画的魅力，不需要像SVG那样拖拖拉拉地操作DOM元素，速度飞快。尤其是搞动态图和复杂动画时，更能体现出Canvas的速度无人能敌！
三、柱状图的实现步骤
想画出好看的Canvas柱状图？其实只要做好4步骤就行！首先，字一定得打好，这可是柱状图的基础~然后，要搞定X、Y轴，它们可是柱状图的骨头！接下来就是数据分类的事儿，也就是怎么安排和展示数据。最后，当然少不了让数据跳出来，用鼠标点点，这样用着才方便。
四、图表初始化的重要性
var con=document.getElementById('container');
var chart=new Bar(con);
chart.init({
title:'全年降雨量柱状图',
xAxis:{// x轴
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis:{//y轴
name:'水量',
formatter:'{value} ml'
},
series:[//分组数据
{
name:'东部降水量',
data:[62,20,17,45,100,56,19,38,50,120,56,130]
},
{
name:'西部降水量',
data:[52,10,17,25,60,39,19,48,70,30,56,8]
},
{
name:'南部降水量',
data:[12,10,17,25,27,39,50,38,100,30,56,90]
},
{
color:'hsla(270,80%,60%,1)',
name:'北部降水量',
data:[12,30,17,25,7,39,49,38,60,30,56,10]
}
]
});
你想用ECharts绘制柱状图？莫急！首先得给它构造一个HTML标签，就像建房子要先打地基似的。接着就要靠init方法启动，你可不能忘记传入数据，否则房子怎么盖起来？还有一点，Canvas的style.width跟width可不是一回事儿，千万别弄混了哟~
五、绘制XY轴的技巧
首先搞定X、Y轴然后我就给它取了个名儿。下一步就是开始画线，处理起来挺费劲儿的，比如遇到那些一堆堆的数据什么的。然后，就在轴上标注刻度和分组标签。每个点都能自定义名字和颜色要是懒得弄，那我就给它们默认的设置好了。
class Chart{
constructor(container){
this.container=container;
this.canvas=document.createElement('canvas');
this.ctx=this.canvas.getContext('2d');
this.W=1000*2;
this.H=600*2;
this.padding=120;
this.paddingTop=50;
this.title='';
this.legend=[];
this.series=[];
//通过缩小一倍，解决字体模糊问题
this.canvas.width=this.W;
this.canvas.height=this.H;
this.canvas.style.width = this.W/2 + 'px';
this.canvas.style.height = this.H/2 + 'px';
}
}
六、数据动画的实现
为了让图更好玩儿，我加了个小变动。就像给Y轴加点速度vy，让它动起来似的。再来个标志isStop，看啥时候停下呗。等动画完成了，立马停车，不浪费电脑资源~
七、鼠标事件的处理
class Bar extends Chart{
constructor(container){
super(container);
this.xAxis={};
this.yAxis=[];
this.animateArr=[];
}
init(opt){
Object.assign(this,opt);
if(!this.container)return;
this.container.style.position='relative';
this.tip=document.createElement('p');
this.tip.style.cssText='display: none; position: absolute; opacity: 0.5; background: #000; color: #fff; border-radius: 5px; padding: 5px; font-size: 8px; z-index: 99;';
this.container.appendChild(this.canvas);
this.container.appendChild(this.tip);
this.draw();
this.bindEvent();
}
draw(){//绘制
}
showInfo(){//显示信息
}
animate(){//执行动画
}
showData(){//显示数据
}
图表还能用鼠标玩，轻轻一点就有更多细节，还能随意拖拽换看其他内容！我可是努力让它变得快速又灵敏，保证你们用得轻松又愉快。
八、Canvas的主要知识点
搞定柱状图后，我在Canvas上摸索出一些有意思的小技巧。比如说，怎么做分组？ArcTo帮你做出漂亮的弧线，高级感十足！别忽视textAlign这个小功能，它能帮你测量文字宽度，排版就靠它了。最后，translate位移大法也是个神器，简单直接又好用。
九、实战案例总结
实战完了，真心觉得Canvas图表特给力，灵活性超乎想象。不管是写字还是搞数据动画，都让我兴趣满满！相信只要多多练习学习，肯定能更深入地了解Canvas，搞出更多惊艳的图表应用。
十、邀请互动
看完这个文章，是不是对Canvas图表有点感兴趣？有啥不明白的就直接在下面评论问问我哈。觉得不错记得点个赞再分享给小伙伴们！让我们一起来揭开Canvas图表的神秘面纱！
draw(){
var that=this,
ctx=this.ctx,
canvas=this.canvas,
W=this.W,
H=this.H,
padding=this.padding,
paddingTop=this.paddingTop,
xl=0,xs=0,xdis=W-padding*2,//x轴单位数，每个单位长度，x轴总长度
yl=0,ys=0,ydis=H-padding*2-paddingTop;//y轴单位数，每个单位长度，y轴总长度
ctx.fillStyle='hsla(0,0%,20%,1)';
ctx.strokeStyle='hsla(0,0%,10%,1)';
ctx.lineWidth=1;
ctx.textAlign='center';
ctx.textBaseLine='middle';
ctx.font='24px arial';
ctx.clearRect(0,0,W,H);
if(this.title){
ctx.save();
ctx.textAlign='left';
ctx.font='bold 40px arial';
ctx.fillText(this.title,padding-50,70);
ctx.restore();
}
if(this.yAxis&&this.yAxis.name){
ctx.fillText(this.yAxis.name,padding,padding+paddingTop-30);
}
// x轴
ctx.save();
ctx.beginPath();
ctx.translate(padding,H-padding);
ctx.moveTo(0,0);
ctx.lineTo(W-2*padding,0);
ctx.stroke();
// x轴刻度
if(this.xAxis&&(xl=this.xAxis.data.length)){
xs=(W-2*padding)/xl;
this.xAxis.data.forEach((obj,i)=>{
var x=xs*(i+1);
ctx.moveTo(x,0);
ctx.lineTo(x,10);
ctx.stroke();
ctx.fillText(obj,x-xs/2,40);
});
}
ctx.restore();
// y轴
ctx.save();
ctx.beginPath();
ctx.strokeStyle='hsl(220,100%,50%)';
ctx.translate(padding,H-padding);
ctx.moveTo(0,0);
ctx.lineTo(0,2*padding+paddingTop-H);
ctx.stroke();
ctx.restore();
if(this.series.length){
var curr,txt,dim,info,item,tw=0;
for(var i=0;iinfo.max){
info=curr;
}
}
if(!info) return;
yl=info.num;
ys=ydis/yl;
//画Y轴刻度
ctx.save();
ctx.fillStyle='hsl(200,100%,60%)';
ctx.translate(padding,H-padding);
for(var i=0;i绘制数据
因为数据项需要后续执行动画和鼠标滑过的时候显示内容，所以把它放进动画队列animateArr中。这里要把分组数据展开，把之前的两次嵌套的数组转为一层，并计算好每个数据项的属性，比如名称，x坐标，y坐标，宽度，速度，颜色。数据组织完毕后，接着执行动画。
showData(xl,xs,max){
//画数据
var that=this,
ctx=this.ctx,
ydis=this.H-this.padding*2-this.paddingTop,
sl=this.series.filter(s=>!s.hide).length,
sp=Math.max(Math.pow(10-sl,2)/3-4,5),
w=(xs-sp*(sl+1))/sl,
h,x,index=0;
that.animateArr.length=0;
// 展开数据项，填入动画队列
for(var i=0,item,len=this.series.length;i{
h=d/max*ydis;
x=xs*j+w*index+sp*(index+1);
that.animateArr.push({
index:i,
name:item.name,
num:d,
x:Math.round(x),
y:1,
w:Math.round(w),
h:Math.floor(h+2),
vy:Math.max(300,Math.floor(h*2))/100,
color:item.color
});
});
index++;
}
this.animate();
}
评论0