這篇文章主要介紹了html5中canvas圖表如何實(shí)現(xiàn)柱狀圖，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上1000家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏(yíng)平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為牟定企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，牟定網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
前幾天用到了圖表庫(kù)，其中百度的ECharts，感覺(jué)做得最好，看它默認(rèn)用的是canvas，canvas圖表在處理大數(shù)據(jù)方面比svg要好。那我也用canvas來(lái)實(shí)現(xiàn)一個(gè)圖表庫(kù)吧，感覺(jué)不會(huì)太難，先實(shí)現(xiàn)個(gè)簡(jiǎn)單的柱狀圖。
效果如下：
主要功能點(diǎn)包括：
文本的繪制
XY軸的繪制；
數(shù)據(jù)分組繪制；
數(shù)據(jù)動(dòng)畫(huà)的實(shí)現(xiàn)；
鼠標(biāo)事件的處理。
使用方式
首先我們看一下使用方式，參考了部分ECharts的使用方式，先傳入要顯示圖表的html標(biāo)簽，接著調(diào)用init，初始化的同時(shí)傳入數(shù)據(jù)。
重慶分公司
重慶分公司
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:[//分組數(shù)據(jù)
{
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]
}
]
});圖表基類(lèi)，我們后面還要寫(xiě)餅圖，折線(xiàn)圖，所以把公共的部分抽出來(lái)。注意canvas.style.width與canvas.width是不一樣的，前者會(huì)拉伸圖形，后者才是我們正常用的，不會(huì)拉伸圖形。在這里這樣寫(xiě)先擴(kuò)大再縮小是為了解決canvas繪制文字時(shí)模糊的問(wèn)題。
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=[];
//通過(guò)縮小一倍，解決字體模糊問(wèn)題
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';
}
}柱狀圖初始化，調(diào)用es6中的Object.assign(this,opt)，這個(gè)相當(dāng)于JQ中的extend方法，把屬性復(fù)制到當(dāng)前實(shí)例。同時(shí)還建了個(gè)tip屬性，這是個(gè)html標(biāo)簽，后面顯示數(shù)據(jù)信息用。接著繪制圖形，然后綁定鼠標(biāo)事件。
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(){//執(zhí)行動(dòng)畫(huà)
}
showData(){//顯示數(shù)據(jù)
}繪制XY軸
首先繪制標(biāo)題，接著XY軸，然后遍歷分組數(shù)據(jù)series，里面有復(fù)雜的計(jì)算，然后繪制XY軸的刻度，繪制分組標(biāo)簽，最后是繪制數(shù)據(jù)。數(shù)據(jù)項(xiàng)series中是分組數(shù)據(jù)，它跟X軸的xAxis.data一一對(duì)應(yīng)。每個(gè)項(xiàng)可以自定義名稱(chēng)和顏色，沒(méi)有指定的話(huà)，名稱(chēng)賦予nunamed和自動(dòng)生成顏色。這里還用legend屬性記錄下了標(biāo)簽列表信息，因?yàn)楹罄m(xù)鼠標(biāo)點(diǎn)擊判斷是否點(diǎn)中用的上。
canvas主要知識(shí)點(diǎn)：
分組標(biāo)簽使用了arcTo方法，這樣就能繪制出圓角的效果。
繪制文本使用了measureText方法，可以用來(lái)測(cè)量文字所占寬度，這樣就可以調(diào)整下一次繪制的位置，避免位置沖突。
translate位移方法，可以放在繪制上下文(save和restore的中間)中，這樣可以避免復(fù)雜的位置運(yùn)算。
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軸單位數(shù)，每個(gè)單位長(zhǎng)度，x軸總長(zhǎng)度
yl=0,ys=0,ydis=H-padding*2-paddingTop;//y軸單位數(shù)，每個(gè)單位長(zhǎng)度，y軸總長(zhǎng)度
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;
//畫(huà)Y軸刻度
ctx.save();
ctx.fillStyle='hsl(200,100%,60%)';
ctx.translate(padding,H-padding);
for(var i=0;i<=yl;i++){
ctx.beginPath();
ctx.strokeStyle='hsl(220,100%,50%)';
ctx.moveTo(-10,-Math.floor(ys*i));
ctx.lineTo(0,-Math.floor(ys*i));
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle='hsla(0,0%,80%,1)';
ctx.moveTo(0,-Math.floor(ys*i));
ctx.lineTo(xdis,-Math.floor(ys*i));
ctx.stroke();
ctx.textAlign='right';
dim=Math.min(Math.floor(info.step*i),info.max);
txt=this.yAxis.formatter?this.yAxis.formatter.replace('{value}',dim):dim;
ctx.fillText(txt,-20,-ys*i+10);
}
ctx.restore();
//畫(huà)數(shù)據(jù)
this.showData(xl,xs,info.max);
}
} 繪制數(shù)據(jù)
因?yàn)閿?shù)據(jù)項(xiàng)需要后續(xù)執(zhí)行動(dòng)畫(huà)和鼠標(biāo)滑過(guò)的時(shí)候顯示內(nèi)容，所以把它放進(jìn)動(dòng)畫(huà)隊(duì)列animateArr中。這里要把分組數(shù)據(jù)展開(kāi)，把之前的兩次嵌套的數(shù)組轉(zhuǎn)為一層，并計(jì)算好每個(gè)數(shù)據(jù)項(xiàng)的屬性，比如名稱(chēng)，x坐標(biāo)，y坐標(biāo)，寬度，速度，顏色。數(shù)據(jù)組織完畢后，接著執(zhí)行動(dòng)畫(huà)。
showData(xl,xs,max){
//畫(huà)數(shù)據(jù)
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;
// 展開(kāi)數(shù)據(jù)項(xiàng)，填入動(dòng)畫(huà)隊(duì)列
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();
} 執(zhí)行動(dòng)畫(huà)
執(zhí)行動(dòng)畫(huà)也沒(méi)啥好說(shuō)的，里面就是個(gè)自執(zhí)行閉包函數(shù)。動(dòng)畫(huà)原理就是給y軸依次累加速度值vy。但記得當(dāng)隊(duì)列執(zhí)行完動(dòng)畫(huà)后，要停止它，所以有個(gè)isStop的標(biāo)志，每次執(zhí)行完隊(duì)列的時(shí)候就判斷。
animate(){
var that=this,
ctx=this.ctx,
isStop=true;
(function run(){
isStop=true;
for(var i=0,item;i=0.1){
item.y=item.h;
} else {
item.y+=item.vy;
}
if(item.y綁定事件
事件一：mousemove的時(shí)候，看看鼠標(biāo)位置是不是處于分組標(biāo)簽還是數(shù)據(jù)項(xiàng)上，繪制路徑后調(diào)用isPointInPath(x,y)，true則canvas.style.cursor='pointer'；如果是數(shù)據(jù)項(xiàng)的話(huà)，還要給把該柱形重新繪制，設(shè)置透明度，區(qū)分出來(lái)。還需要把內(nèi)容顯示出來(lái)，這里是一個(gè)相對(duì)父容器container為絕對(duì)定位的p，初始化的時(shí)候已經(jīng)建立為tip屬性了。我們把顯示部分封裝成showInfo方法。
事件二：mousedown的時(shí)候，判斷鼠標(biāo)點(diǎn)擊哪個(gè)分組標(biāo)簽，然后設(shè)置對(duì)應(yīng)分組數(shù)據(jù)series中的hide屬性，如果是true，表示不顯示該項(xiàng)，然后調(diào)用draw方法，重寫(xiě)渲染繪制，執(zhí)行動(dòng)畫(huà)。
bindEvent(){
var that=this,
canvas=this.canvas,
ctx=this.ctx;
this.canvas.addEventListener('mousemove',function(e){
var isLegend=false;
// pos=WindowToCanvas(canvas,e.clientX,e.clientY);
var box=canvas.getBoundingClientRect();
var pos = {
x:e.clientX-box.left,
y:e.clientY-box.top
};
// 分組標(biāo)簽
for(var i=0,item,len=that.legend.length;i'+obj.name+':'+txt+'';
this.tip.style.left=(pos.x+(box.left-con.left)+10)+'px';
this.tip.style.top=(pos.y+(box.top-con.top)+10)+'px';
this.tip.style.display='block';
} 感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5中canvas圖表如何實(shí)現(xiàn)柱狀圖內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
標(biāo)題名稱(chēng)：html5中canvas圖表如何實(shí)現(xiàn)柱狀圖
網(wǎng)站URL：http://weahome.cn/article/pooggi.html
