运用canvas绘折线图和柱状图

Posted lznzxy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了运用canvas绘折线图和柱状图相关的知识,希望对你有一定的参考价值。

一、绘制折线图

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";
            }

 


以上是关于运用canvas绘折线图和柱状图的主要内容,如果未能解决你的问题,请参考以下文章

canvas学习之折线图

如何让基于html5 canvas的图表插件chart.js中的柱状图形横向显示

JreeeChart入门

怎样把柱状图和折线图合并一起

FusionCharts,双折线图和双柱状图

怎么在excel图表上既显示柱状图又显示折线图