带你快速玩转canvas——写个折线图-阿里云开发者社区

开发者社区> 零零水> 正文

带你快速玩转canvas——写个折线图

简介:
+关注继续查看

需求:

1. 自适应父Dom的宽高,但设置canvas元素的最小宽高,小于最小宽高则设置父Dom带滚动条。
2.  窗口大小变化时,重新绘制折线图,以适应新的大小,保证折线图一直以最好效果展现;
3. x轴的坐标尺度为时间,单位是月份,数据类型是数组,数组元素是字符串,格式类似"2016/12"这种,为了方便,假设x轴固定有12个刻度,初始刻度为x=0的位置;
4. y轴尺度为数字,要求跟随数据的最大值而自动变化,以保证良好的可见性,并且需要绘制参考线;
5. 简单来说,参考excel表格自动生成的折线图而绘制。

分析需求:

1. canvas元素要自适配父Dom,因此要设法获得父Dom的大小,然后调整自身的大小;
2. canvas元素的宽高的设置,需要写在html元素中,而不能通过css设置(否则可能出问题),因此应该通过js显式的写出来(例如通过canvas.width这样的方法);
3. 折线图,首先确定xy坐标轴绘制在画布上的范围(比canvas画布小);
4. 然后绘制xy坐标轴;
5. 再确定表示数据的折线的范围,注意,数据折线的范围应该比xy坐标轴的范围要小,且左下角和xy坐标轴的原点重合,如此方能有更好的体验(否则若比如数据折线的最右边和坐标轴的最右边重合,是会容易带来误解的);
6. x轴的时间刻度为12个刻度,且初始刻度为x=0的位置,因此每个刻度的宽度 = 数据折线的总宽度/11;
7. 假如x轴的时间刻度为可变数量,也不难,每个刻度的宽度 = 数据折线总宽度(可确认) / (x轴刻度总数量 - 1) 即可;

8. 比较麻烦的y轴的刻度确认。
9. 首先要确认y轴刻度的最大值,遍历所有数据,取其最大值dataMaxY。
10. 然后将dataMaxY向上取值获得用于计算刻度的最大值MaxY,逻辑是这样的:
    假如第一个数字是8或者9,,那么取比开头数字大1的数字。例如2开头就是3,6开头就是7,然后后面用0补足位数(以确保和原来的最大数值是同一个量级的)
    假如第一个数字是1开头,例如13,那么取比其前两位大的偶数,例如13的话取14,14的话取16,18或19则取20;
11. 根据MaxY来确定y轴的刻度,存储刻度的为数组,数组的元素个数就是刻度的数量。
12. 当MaxY小于10时,固定刻度为2/格,最大10
13. 当MaxY为1开头时,刻度为2/格,最大刻度比MaxY要大;
14. 当MaxY为2~5开头时,刻度为5/格,最大刻度比MaxY大;
15. 当MaxY为6~9开头时,刻度为10/格,最大刻度比MaxY大;
16. 根据刻度数组,以及数据折线图的绘制区域,绘制参考线;
17. 至此y轴刻度和参考线完;

18. 根据刻度数组的最后一个元素(刻度的最大值),以及数据的值,外加数据折线图区域的坐标,可以绘制出折线图;
19. 绘制折线图时可以顺便写下x轴的刻度(x坐标和数据折线图当前数据坐标相同,y坐标固定);
20. 有必要的话,添加输入验证,如果输入错误,则在绘制区域显示错误文字。
21. 添加各种自定义设置,用于设置文字的样式、颜色,宽度大小等;

分拆需求为函数:

1. 获得并设置canvas标签的最小宽高,然后返回canvas中,绘图区域坐标(指x、y坐标轴的绘图坐标);
2. 绘制x、y坐标轴(不包含刻度);
3. 获得y轴最大尺度;
4. 确定y轴刻度数组;
5. 根据y轴刻度数组,绘制参考线和刻度的数字;
6. 绘制数据折线图和x坐标刻度;
7. 绘图函数,需要重新绘制图时,通过本方法来调用以上方法(本接口暴露出来可被外界调用);
8. 输入检查函数,用于提示错误;
9. 刷新函数,用于在窗口大小变化时主动调用绘图函数重新绘图。
10. 【测试用】自动生成数据的函数;

源代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>用Canvas绘制折线图</title>
    <style>
        #test {
            border: 1px solid black;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="test"></div>
<script>
    var dom = document.getElementById("test");    //数据源,这里是模拟生成的
    //数据生成函数
    var caseInfo = (function () {
        var caseInfo = [];
        //最大值,实际使用中不要用这一条,这个只是用来生成数据的
        var max = Math.pow(10, parseInt(Math.random() * 5));

        for (let i = 0; i < 12; i++) {
            caseInfo.push(parseInt(max * Math.random()));
        }
        console.log(caseInfo);
        return caseInfo;
    })();
    //    var caseInfo = [0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0];

    var dateText = ["2014/2", "2014/3", "2014/4", "2014/5", "2014/6", "2014/7", "2014/8", "2014/9", "2014/10", "2014/11", "2014/12", "2015/1"];

    var draw = new drawCanvas(dom, caseInfo, dateText);

    //  绘图函数的类,传入的参数依次为,canvas标签应该被放置的父Dom,数据,时间
    //  1、父dom:支持自适应,最小宽高(此时会设置父dom的overflow为auto)
    //  2、数据:标准的为12个数据,类型为number,不足12个会自动用0填充满(填充在数组的开始部分);
    //  3、时间要求格式为:年份/月份,例如2016/12,类型为字符串,非该格式的会被识别为错误并报错(如需修改请自行更改相关判断部分);
    //  4、y轴坐标的刻度会根据数据的最大值而自动变化;
    //  5、x轴坐标的刻度自动设为12格
    function drawCanvas(Dom, caseInfoArray, dateTextArray) {
        //  设置
        var color = {
            xyAxisLine: "#000", //x、y坐标轴的颜色
            xScale: "#000",      //x轴刻度文字的颜色
            yScale: "#000",    //y轴刻度文字的颜色
            referenceLine: "#bbb",  //参考线带颜色
            dataLine: "#f6793c",     //数据线条的颜色
            errorMessage: "#000"    //错误提示的颜色
        };
        var font = {
            yScale: "Microsoft YaHei 12px",  //y轴刻度文字
            xScale: "Microsoft YaHei 12px"    //x轴刻度文字
        };
        var dataLineWidth = 3;   //数据线条的宽度
        var error = {
            errorCaseInfo: "错误的数据",
            errorCaseTpye: "数据类型不是数字,无法绘图",
            errorDate: "错误的时间输入"
        }
        //  设置完

        //获取基础数据
        var canvas = document.createElement("canvas");
        Dom.appendChild(canvas);
        var ctx = canvas.getContext("2d");
        var caseInfo = caseInfoArray;
        var dateText = dateTextArray;

        //获得并设置canvas标签的最小宽高,然后返回canvas中,绘图区域坐标
        var setWidthWithHeight = function (Dom, canvas) {
            //在dojo中,用aspect.after改造
            //    window.onresize,每次触发事件时重置一次,并且绘制一次
            //获得画布区域的宽度和高度,并重置
            if (Dom.clientWidth < 700) {
                canvas.width = 700;
                Dom.style.overflowX = "auto";
            } else {
                canvas.width = Dom.clientWidth;
            }
            if (Dom.clientHeight < 250) {
                canvas.height = 250;
                Dom.style.overflowY = "auto";
            } else {
                canvas.height = Dom.clientHeight;
            }

            //坐标轴区域
            //注意,实际画折线图区域还要比这个略小一点
            return {
                x: 60 - 0.5,    //坐标轴在canvas上的left坐标
                y: 40 - 0.5,    //坐标轴在canvas上的top坐标
                maxX: canvas.width - 60.5,   //坐标轴在canvas上的right坐标
                maxY: canvas.height - 40.5   //坐标轴在canvas上的bottom坐标
            };
        }

        //  绘制x、y坐标轴(不包含刻度)
        var drawAxis = function (ctx, axis) {
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeStyle = color.xyAxisLine;
            ctx.moveTo(axis.x, axis.maxY);
            ctx.lineTo(axis.x, axis.y);
            ctx.lineTo(axis.x - 5, axis.y + 5);
            ctx.moveTo(axis.x, axis.y);
            ctx.lineTo(axis.x + 5, axis.y + 5);
            ctx.stroke();

            //  再画X轴
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeStyle = color.xyAxisLine;
            ctx.moveTo(axis.x, axis.maxY);
            ctx.lineTo(axis.maxX, axis.maxY);
            ctx.lineTo(axis.maxX - 5, axis.maxY + 5);
            ctx.moveTo(axis.maxX, axis.maxY);
            ctx.lineTo(axis.maxX - 5, axis.maxY - 5);
            ctx.stroke();

            // 写y轴原点的数字(注意,虽然是坐标原点,但这个是y轴的)
            ctx.font = font.yScale;
            ctx.textAlign = "right";
            ctx.fillStyle = color.referenceLine;
            // 设置字体内容,以及在画布上的位置
            ctx.fillText("0", axis.x - 5, axis.maxY);
        }

        // 获得Y轴的最大尺度
        var getMAXrectY = function (caseInfo) {
            var theMaxCaseInfo = 0;
            //用于获取最大值
            caseInfo.forEach(function (item) {
                if (item > theMaxCaseInfo) {
                    theMaxCaseInfo = item;
                }
            });

            //返回计算出的最大数字
            return (function (str) {
                var number = null;
                //用于计量坐标轴y轴的最大数字
                if (str[0] == 1) {
                    if (str[0] + str[1] >= 18) {
                        number = '20';
                    } else {
                        if (Number(str[1]) % 2) {
                            number = str[0] + String(Number(str[1]) + 1);
                        } else {
                            number = str[0] + String(Number(str[1]) + 2);
                        }
                    }
                    for (let i = 2; i < str.length; i++) {
                        number += '0';
                    }
                } else {
                    number = String(Number(str[0]) + 1);
                    for (let i = 1; i < str.length; i++) {
                        number += '0';
                    }
                }
                return number;
            })(String(theMaxCaseInfo));
        }

        //划线和确定单元格的逻辑在这里,逻辑确定好后是将单元格放在rectYArray这个数组中
        var getDrawYLineLaw = function (MAXrectY) {
            var rectYArray = [];
            //当最大案件数小于等于10时,以2为一格
            if (MAXrectY <= 10) {
                console.log(MAXrectY);
                rectYArray.push(2, 4, 6, 8, 10);
            } else {
                var str = String(MAXrectY);
                var zeroNumber = MAXrectY.length - 2;

                //  用于填充的0的数量,原因是判断时只判断前一位或两位
                var fillZero = String(Math.pow(10, zeroNumber)).replace('1', '');

                //  然后先判断首位,如果是1,则最大是之前获取到的最大数值,以2/格为单位
                //  如果是2~5,则以5/格为单位
                //  如果是6~9,则以10/格为单位
                if (Number(str[0]) === 1) {
                    for (var i = 0; i < Number(str[0] + str[1]); i = i + 2) {
                        rectYArray.push(i + 2 + fillZero);
                    }
                } else if (Number(str[0]) >= 2 && Number(str[0]) < 6) {
                    for (var i = 0; i < Number(str[0] + str[1]); i = i + 5) {
                        rectYArray.push(i + 5 + fillZero);
                    }
                } else if (Number(str[0]) >= 6 && Number(str[0]) < 10) {
                    for (var i = 0; i < Number(str[0] + str[1]); i = i + 10) {
                        rectYArray.push(i + 10 + fillZero);
                    }
                }
            }
            console.log(rectYArray);
            return rectYArray;
        }

        //画y轴参考线和坐标数字
        var DrawYLine = function (ctx, axis, YLineLaw) {
            //  在得到单元格后,开始绘图,绘出y轴上每个单元格的直线
            //  Y轴参考线的x坐标是从0到axis.maxX - 10

            var yMaxPoint = axis.y + 20;    //最上面的y轴坐标
            var xMaxPoint = axis.maxX - 10; //最右边的x轴坐标
            ctx.strokeStyle = color.referenceLine;
            for (let i = 0; i < YLineLaw.length; i++) {
                ctx.beginPath();
                //  当前绘制线条的y坐标
                let yLine = (YLineLaw[i] - YLineLaw[0] ) / YLineLaw[YLineLaw.length - 1] * (axis.maxY - yMaxPoint) + yMaxPoint;
                ctx.moveTo(axis.x, yLine);
                ctx.lineTo(xMaxPoint, yLine);
                ctx.stroke();
                //绘完线条写文字
                ctx.font = font.yScale;
                ctx.textAlign = "right";
                ctx.fillStyle = color.yScale;
                // 设置字体内容,以及在画布上的位置
                ctx.fillText(YLineLaw[YLineLaw.length - i - 1], axis.x - 5, yLine + 5);
            }
        }

        //绘制数据
        var DrawData = function (ctx, axis, caseInfo, YLineMax, dateText) {
            //  折线绘图区域的x轴从x=0开始绘图,绘制的最右边是axis.maxX-20(参考线是-10)
            //  y轴是从y=0开始绘制,绘制的最顶部是最顶部参考线的位置(axis.y+20)
            //  参数依次为:绘图对象ctx,坐标轴区域坐标axis,绘图用的数据caseInfo,Y轴最大值YLineMax,x轴横坐标文字dateText
            var rect = {
                left: axis.x,           //折线绘图区域的left
                top: axis.y + 20,       //折线绘图区域的top
                height: axis.maxY - axis.y - 20,      //折线绘图区域的bottom
                width: axis.maxX - 20 - axis.x   //折线绘图区域的right
            };
            //绘制数据的折线
            ctx.beginPath();
            ctx.strokeStyle = color.dataLine;
            ctx.lineWidth = dataLineWidth;
            var firstPoint = {
                x: rect.left + 0.5, //之所以+0.5,是因为rect.x来源于axis.x表示划线,因此少了0.5px宽,这里要弥补上
                y: rect.top + (1 - caseInfo[0] / YLineMax) * rect.height + 0.5
            }
//            console.log(firstPoint);
            ctx.moveTo(firstPoint.x, firstPoint.y);
            for (let i = 0; i < caseInfo.length; i++) {
                var point = {
                    x: rect.left + i / 11 * rect.width + 0.5,
                    y: rect.top + (1 - caseInfo[i] / YLineMax) * rect.height
                };
                ctx.lineTo(point.x, point.y);
                //写x轴坐标文字
                ctx.font = font.xScale;
                ctx.textAlign = "center";
                ctx.fillStyle = color.xScale;
                ctx.fillText(dateText[i], point.x, rect.top + rect.height + 15);
            }
            ctx.stroke();
        }

        //错误检查
        var inputError = function () {
            //不是数组
            if (!(caseInfo instanceof Array)) {
                return error.errorCaseInfo;
            }
            //  数组数目不足12,用0填充靠前的部分
            //  大于12,移除前面的部分
            if (caseInfo.length < 12) {
                while (caseInfo.length < 12) {
                    caseInfo.unshift(0);
                }
            } else if (caseInfo.length > 12) {
                while (caseInfo.length > 12) {
                    caseInfo.shift(0);
                }
            }

            //判断数组每个元素的类型是否是number或者能否转换为number
            var checkElementType = caseInfo.every(function (item) {
                //如果强制转换后为NaN,那么
                if (typeof item !== "number") {
                    return false;
                } else {
                    return true;
                }
            })
            if (!checkElementType) {
                return error.errorCaseTpye;
            }

            //  月份应该是字符串,如2016/2
            //  如果被/分割拆分后数组长度不是2,或者拆分后元素0的长度不是4,或者拆分后元素1的长度不是1或2
            //  或者parseInt转换后为NaN
            var checkDateText = dateText.every(function (item) {
                var date = item.split("/");
                if (date.length !== 2 || date[0].length !== 4 || date[1].length < 1 || date[1].length > 2 ||
                        isNaN(parseInt(date[0])) || isNaN(parseInt(date[1]))) {
                    return false;
                } else {
                    return true;
                }
            })
            if (!checkDateText) {
                return error.errorDate
            }
            return false;
        }

        //绘图函数,绘制时调用本函数
        this.toDraw = function () {
            //  设置canvas的Dom的宽高
            var axis = setWidthWithHeight(Dom, canvas);
            //  绘制x、y坐标轴(不包含刻度)
            drawAxis(ctx, axis);
            //如果检测返回false

            //  如果没问题,则返回false,否则值可以隐式转换为true
            var errorMessage = inputError();
            if (errorMessage) {
                ctx.font = "Bold 20px Arial";
                ctx.textAlign = "center";
                ctx.fillStyle = color.errorMessage;
                ctx.fillText(errorMessage, (axis.x + axis.maxX) / 2, (axis.y + axis.maxY) / 2);
                return;
            }
            //  获得Y轴的最大尺度
            var MAXrectY = getMAXrectY(caseInfo);
            //  获得y轴划参考线规则
            var YLineLaw = getDrawYLineLaw(MAXrectY);
            //  绘制Y轴参考线
            DrawYLine(ctx, axis, YLineLaw);
            //  绘制数据
            DrawData(ctx, axis, caseInfo, YLineLaw[YLineLaw.length - 1], dateText);
        };

        //启动本实例时绘图一次
        this.toDraw();
        var self = this;
        //浏览器窗口大小变化时,绘图一次
        //潜在缺点:会覆盖其他的这个方法,建议用jquery的$(window).resize来替代
        window.onresize = function () {
            self.toDraw();
        };
    }

</script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9719 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2473 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13441 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9096 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7111 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4233 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22146 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载