html5中canvas图表完成柱状图的示例

2020-10-10 19:57 jianzhan

前几日用到了图表库,在其中百度搜索的ECharts,觉得做得最好是,看它默认设置用的是canvas,canvas图表在解决绝大多数据层面比svg好些。那我也用canvas来完成1个图表库吧,觉得不容易太难,先完成个简易的柱状图。

实际效果以下:

关键作用点包含:

  1. 文字的绘图
  2. XY轴的绘图;
  3. 数据信息排序绘图;
  4. 数据信息动漫的完成;
  5. 电脑鼠标恶性事件的解决。

应用方法

最先大家看1下应用方法,参照了一部分ECharts的应用方法,先传入要显示信息图表的html标识,接着启用init,原始化的另外传入数据信息。

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]
            }
        ]
    });

图表基类,大家后边还要写饼图,折线图,因此把公共性的一部分抽出来。留意canvas.style.width与canvas.width是不1样的,前者会拉伸图型,后者才是大家一切正常用的,不容易拉伸图型。在这里这样写先扩张再变小是以便处理canvas绘图文本时模糊不清的难题。

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=[];
            //根据变小1倍,处理字体样式模糊不清难题
            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';
        }
    }

柱状图原始化,启用es6中的Object.assign(this,opt),这个非常于JQ中的extend方式,把特性拷贝到当今案例。另外还建了个tip特性,这是个html标识,后边显示信息数据信息信息内容用。接着绘图图型,随后关联电脑鼠标恶性事件。

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('div');
        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(){//显示信息数据信息

    }

绘图XY轴

最先绘图题目,接着XY轴,随后遍历排序数据信息series,里边有繁杂的测算,随后绘图XY轴的刻度,绘图排序标识,最终是绘图数据信息。数据信息项series中是排序数据信息,它跟X轴的xAxis.data11对应。每一个项能够自定名字和色调,沒有特定的话,名字授予nunamed和全自动转化成色调。这里还用legend特性纪录下了标识目录信息内容,由于后续电脑鼠标点一下分辨是不是点选用的上。

canvas关键专业知识点:

  1. 排序标识应用了arcTo方式,这样就可以绘图出圆角的实际效果。
  2. 绘图文字应用了measureText方式,能够用来精确测量文本所占宽度,这样便可以调剂下1次绘图的部位,防止部位矛盾。
  3. translate位移方式,能够放在绘图左右文(save和restore的正中间)中,这样能够防止繁杂的部位运算。
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⑸0,70);
        ctx.restore();
    }
    if(this.yAxis&&this.yAxis.name){
        ctx.fillText(this.yAxis.name,padding,padding+paddingTop⑶0);
    }

    // x轴
    ctx.save();
    ctx.beginPath();
    ctx.translate(padding,H-padding);
    ctx.moveTo(0,0);
    ctx.lineTo(W⑵*padding,0);
    ctx.stroke();
    // x轴刻度
    if(this.xAxis&&(xl=this.xAxis.data.length)){
        xs=(W⑵*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;i<this.series.length;i++){
            item=this.series[i];
            if(!item.data||!item.data.length){
                this.series.splice(i--,1);continue;
            }
            // 授予沒有色调的项
            if(!item.color){
                var hsl=i%2?180+20*i/2:20*(i⑴);
                item.color='hsla('+hsl+',70%,60%,1)';
            }
            item.name=item.name||'unnamed';

            // 画排序标识
            ctx.save();
            ctx.translate(padding+W/4,paddingTop+40);
            that.legend.push({
                hide:item.hide||false,
                name:item.name,
                color:item.color,
                x:padding+that.W/4+i*90+tw,
                y:paddingTop+40,
                w:60,
                h:30,
                r:5
            });
            ctx.textAlign='left';
            ctx.fillStyle=item.color;
            ctx.strokeStyle=item.color;
            roundRect(ctx,i*90+tw,0,60,30,5);
            ctx.globalAlpha=item.hide?0.3:1;
            ctx.fill();
            ctx.fillText(item.name,i*90+tw+70,26);
            tw+=ctx.measureText(item.name).width;//测算标识符长度
            ctx.restore();

            if(item.hide)continue;
            //测算数据信息在Y轴刻度
            if(!info){
                info=calculateY(item.data.slice(0,xl));
            }
            curr=calculateY(item.data.slice(0,xl));
            if(curr.max>info.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<=yl;i++){
            ctx.beginPath();
            ctx.strokeStyle='hsl(220,100%,50%)';
            ctx.moveTo(⑴0,-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,⑵0,-ys*i+10);
        }
        ctx.restore();
        //画数据信息
        this.showData(xl,xs,info.max);
    }
}

绘图数据信息

由于数据信息项必须后续实行动漫和电脑鼠标滑过的情况下显示信息內容,因此把它放进动漫序列animateArr中。这里要把排序数据信息进行,把以前的两次嵌套循环的数字能量数组变为1层,并测算好每一个数据信息项的特性,例如名字,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⑷,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<len;i++){
        item=this.series[i];
        if(item.hide)continue;
        item.data.slice(0,xl).forEach((d,j)=>{
            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();
}

实行动漫

实行动漫也没啥好说的,里边便是个自实行闭包涵数。动漫基本原理便是给y轴先后累加快度值vy。但记恰当序列实行完动漫后,要终止它,因此有个isStop的标示,每次实行完序列的情况下就分辨。

animate(){
    var that=this,
        ctx=this.ctx,
        isStop=true;
    (function run(){
        isStop=true;
        for(var i=0,item;i<that.animateArr.length;i++){
            item=that.animateArr[i];
            if(item.y-item.h>=0.1){
                item.y=item.h;
            } else {
                item.y+=item.vy;
            }
            if(item.y<item.h){
                ctx.save();
                // ctx.translate(that.padding+item.x,that.H-that.padding);
                ctx.fillStyle=item.color;
                ctx.fillRect(that.padding+item.x,that.H-that.padding-item.y,item.w,item.y);
                ctx.restore();
                isStop=false;
            }
        }
        if(isStop)return;
        requestAnimationFrame(run);
    }())
}

关联恶性事件

恶性事件1:mousemove的情况下,看看电脑鼠标部位是否处在排序标识還是数据信息项上,绘图相对路径后启用isPointInPath(x,y),true则canvas.style.cursor='pointer';假如是数据信息项的话,还要给把该柱形再次绘图,设定全透明度,区别出来。还必须把內容显示信息出来,这里是1个相对性父器皿container为肯定精准定位的div,原始化的情况下早已创建为tip特性了。大家把显示信息一部分封裝成showInfo方式。

恶性事件2:mousedown的情况下,分辨电脑鼠标点一下哪一个排序标识,随后设定对应排序数据信息series中的hide特性,假如是true,表明无法显示该项,随后启用draw方式,重新写过3D渲染绘图,实行动漫。

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
            };
            // 排序标识
            for(var i=0,item,len=that.legend.length;i<len;i++){
                item=that.legend[i];
                ctx.save();
                roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
                // 由于变小了1倍,因此座标要*2
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    canvas.style.cursor='pointer';
                    ctx.restore();
                    isLegend=true;
                    break;
                }
                canvas.style.cursor='default';
                ctx.restore();
            }

            if(isLegend) return;
            //挑选数据信息项
            for(var i=0,item,len=that.animateArr.length;i<len;i++){
                item=that.animateArr[i];
                ctx.save();
                ctx.fillStyle=item.color;
                ctx.beginPath();
                ctx.rect(that.padding+item.x,that.H-that.padding-item.h,item.w,item.h);
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    //清空后再再次绘图全透明度为0.5的图型
                    ctx.clearRect(that.padding+item.x,that.H-that.padding-item.h,item.w,item.h);
                    ctx.globalAlpha=0.5;
                    ctx.fill();
                    canvas.style.cursor='pointer';
                    that.showInfo(pos,item);
                    ctx.restore();
                    break;
                }
                canvas.style.cursor='default';
                that.tip.style.display='none';
                ctx.globalAlpha=1;
                ctx.fill();
                ctx.restore();
            }
            
        },false);

        this.canvas.addEventListener('mousedown',function(e){
            e.preventDefault();
            var box=canvas.getBoundingClientRect();
            var pos = {
                x:e.clientX-box.left,
                y:e.clientY-box.top
            };
            for(var i=0,item,len=that.legend.length;i<len;i++){
                item=that.legend[i];
                roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
                // 由于变小了1倍,因此座标要*2
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    that.series[i].hide=!that.series[i].hide;
                    that.animateArr.length=0;
                    that.draw();
                    break;
                }
            }

        },false);
    }
    //显示信息数据信息
    showInfo(pos,obj){
        var txt=this.yAxis.formatter?this.yAxis.formatter.replace('{value}',obj.num):obj.num;
        var box=this.canvas.getBoundingClientRect();
        var con=this.container.getBoundingClientRect();
        this.tip.innerHTML = '<p>'+obj.name+':'+txt+'</p>';
        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';
    }

总结

这里进行的只是个基础的实际效果,实际上也有许多地区要进1步提升,例如回应式的适用,挪动端适用,动漫的实际效果,多y轴的适用,显示信息內容的实际效果,另外适用折线作用等。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。