运用canvas绘折线图和柱状图

Posted 2021-01-26 lznzxy

一、绘制折线图

1、首先，随便定义一个数组对象代表坐标，然后绘出打底的网格线：

        <canvas width="600px" height="400px" ></canvas>
        <script>
            var mycanvas=document.querySelector("canvas");
            var pan=mycanvas.getContext("2d");
            var wid=mycanvas.width;
            var high=mycanvas.height;
            var sz=[
                {
                    x:50,
                    y:300
                },
                {
                    x:150,
                    y:100
                },
                {
                    x:200,
                    y:200
                },
                {
                    x:400,
                    y:300
                },
                {
                    x:500,
                    y:50
                }
            ]
            for (i=1;i<Math.floor(high/10);i++) {
                pan.moveTo(0,10*i+0.5);
                pan.lineTo(wid,10*i+0.5);
                pan.strokeStyle="#eee";
                pan.stroke();
            }
            for (j=1;j<Math.floor(wid/10);j++) {
                pan.moveTo(10*j+0.5,0);
                pan.lineTo(10*j+0.5,high);
                pan.strokeStyle="#eee";
                pan.stroke();
            }

2、绘出x轴y轴：

            pan.beginPath();
            pan.moveTo(20,high-20);
            pan.lineTo(560,high-20);
            pan.lineTo(550,high-25);
            pan.lineTo(550,high-15);
            pan.lineTo(560,high-20);
            
            pan.moveTo(20,high-20);
            pan.lineTo(20,40);
            pan.lineTo(15,50);
            pan.lineTo(25,50);
            pan.lineTo(20,40);
            pan.strokeStyle="#000";
            pan.stroke();
            pan.fill();
            pan.fillText("X",570,high-20);
            pan.fillText("Y",20,30);
            

3、根据定义的坐标绘出相应的折线图：

　　由于canvas原点跟我们定义的坐标原点有差距，绘图的关键在于将定义的坐标换算成相对于canvas的坐标表示，找到准确的对应点。注意每个折点绘制小方块的时候重新开始一个新路径，不然会与已绘出的折线连在一起，影响本身应有的效果。

            pan.beginPath();
            var prevX = 20;
            var prevY = high-20;
            for (var m=0;m<sz.length;m++) {
                pan.moveTo(prevX,prevY);
                pan.lineTo(20+sz[m].x,high-20-sz[m].y);
                pan.rect(20+sz[m].x-2.5,high-20-sz[m].y-2.5,5,5);
                pan.fillStyle="blueviolet";
                pan.strokeStyle="blueviolet";
                pan.stroke();
                pan.fill();
                pan.fillText("("+sz[m].x+","+sz[m].y+")",20+sz[m].x,high-20-sz[m].y);
                prevX = 20+sz[m].x;
                prevY = high-20-sz[m].y;
            }
        </script>

二、绘制柱状图

1、与绘制折线图相似，绘制打底网格，x轴y轴，根据数据换算成相对canvas的坐标，值得注意的是绘制柱状矩形的时候留意矩形的起点坐标和方向、宽高，如有发现不对应的情况及时找出问题并修改。

        <canvas width="800px" height="500px" ></canvas>
        <script>
            var mycanvas=document.querySelector("canvas");
            var pan=mycanvas.getContext("2d");
            var wid=mycanvas.width;
            var high=mycanvas.height;
            var sz=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
            var sz2=[80,180,230,95,200,340,290];
            for (i=1;i<=Math.floor(high/100);i++) {
                pan.moveTo(50,80*i+0.5);
                pan.lineTo(wid-50,80*i+0.5);
                pan.strokeStyle="#eee";
                pan.stroke();
                pan.textAlign="right";
                pan.fillText(500-100*i,45,80*i+0.5)
            }
            pan.beginPath();
            pan.moveTo(50,400);
            pan.lineTo(750,400);
            pan.moveTo(50,400);
            pan.lineTo(50,78);
            pan.strokeStyle="#000";
            pan.stroke();
            for (j=0;j<7;j++) {
                pan.moveTo(100+90*j,400);
                pan.lineTo(100+90*j,405);
                pan.stroke();
                var mylinear=pan.createLinearGradient(100,400,100,20);
                mylinear.addColorStop(0,"#00f");
                mylinear.addColorStop(1,"#0f0");
                pan.rect(100+90*j-20,400-sz2[j],40,sz2[j]);
                pan.fillStyle=mylinear;
                pan.fill();
                pan.textAlign="center";
                pan.fillText(sz[j],100+90*j,420);
                pan.fillText(sz2[j],100+90*j,400-sz2[j]-10);
                pan.fillStyle="#000000";
            }