效果图：

重难点：

　　1、画布左上角的顶点的坐标为（0 ，0），右下角的坐标最大，与平常思维相反

　　2、数据的处理

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
   <script src = "recordPaint.js"></script>
    <style>
        canvas{
            width:600px;
            height:600px;
            border:1px solid #ddd;
            background:#eee;
            display:block;
            margin:40px auto;
        }
    </style>
</head>

<script>
    window.onload = function(){
        //十二个月对应的y轴数据
        var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];
        //获取画布DOM
        var recordCvs = document.getElementById("recordCvs");
        //调用绘制画布函数
        recordPaint(recordCvs,datas);
    }
</script>
<body>
<div id="recordContent">
    <canvas id="recordCvs" width = "600" height = "400">
        您的浏览器不支持canvas
    </canvas>
</div>
</body>
</html>

recordPaint.js对应代码：
recordPaint = function (elem, datas) {
    //1.创建画布对象
    var context = elem.getContext('2d');
    //2、获取画布的宽度和高度
    const WIDTH = elem.width;
    const HEIGHT = elem.height;
    //定义坐标轴相对于画布的内边距
    var padding = 20;//初始化内边距
    var paddingLeft = 50;// 至少大于绘制文字的宽度
    var paddingBottom = 30;// 至少大于绘制文字的高度
    // 4、定义绘制坐标轴的关键点的坐标值
    var axisY = { // y轴的起点坐标值
        x: paddingLeft,
        y: padding
    };
    var origin = { // 原点坐标值（x轴与y轴交叉点）
        x: paddingLeft,
        y: HEIGHT - paddingBottom
    };
    var axisX = { // X轴的起点坐标值
        x: WIDTH - padding,
        y: HEIGHT - paddingBottom
    };
    //绘制坐标轴
    context.beginPath();
    context.moveTo(axisY.x, axisY.y);
    context.lineTo(origin.x, origin.y);
    context.lineTo(axisX.x, axisX.y);
    context.stroke();

    //绘制坐标轴的箭头
    context.beginPath();
    context.moveTo(axisY.x - 5, axisY.y + 10);
    context.lineTo(axisY.x, axisY.y);
    context.lineTo(axisY.x + 5, axisY.y + 10);
    context.stroke();

    context.beginPath();
    context.moveTo(axisX.x - 10, axisX.y - 5);
    context.lineTo(axisX.x, axisX.y);
    context.lineTo(axisX.x - 10, axisX.y + 5);
    context.stroke();

    //存储x轴的值
    var pointsX = [];

    //7、绘制坐标轴的刻度（x轴的月份和y轴的金额）
    //x轴的月份
    var month = {
        x: paddingLeft,
        y: HEIGHT - paddingBottom + 5
    };
    for (var i = 1; i <= 12; i++) {
        context.textBaseline = "top";
        context.fillText(i + "月", month.x, month.y);
        pointsX.push(month.x);
        month.x += (axisX.x - origin.x) / 12;
    }

    //绘制y轴的金额
    //从众多的关键金额中，渠道最高金额
    var max = Math.max.apply(Math, datas);
    var moneyY = (origin.y - axisY.y) / (max / 500 + 1);
    var money = {
        x: axisY.x - 5,
        y: axisY.y + moneyY,
        jin: max
    };
    //遍历最高值/间隔
    context.textAlign = "right";
    for (var i = 0; i < max / 500; i++) {
        context.fillText(money.jin + "元", money.x, money.y);
        money.y += moneyY;
        money.jin -= 500;
    }

    //绘制折线
    context.beginPath();
    for (let i = 0; i < datas.length; i++) {
        //x轴的坐标
        let pointX = pointsX[i];
        //y轴的坐标
        let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
        if (i === 0) {
            // context.textBaseline = "";
            context.textAlign = "left"
            context.moveTo(pointX, pointY);
        } else {
            context.textBaseline = "bottom";
            context.textAlign = "center"
            context.lineTo(pointX, pointY);
        }
        //绘制钱
        context.fillText(datas[i], pointX, pointY);
    }
    context.stroke();

    //绘制小圆点
    for(let i = 0; i < datas.length; i++){
        //x轴的坐标
        let pointX = pointsX[i];
        //y轴的坐标
        let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
        context.fillStyle = "#aa0000";
        context.beginPath();
        context.arc(pointX,pointY,3,0,2*Math.PI);
        context.fill();
    }
};

canvas绘制折线图的更多相关文章

  1. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  3. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  4. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. canvas绘制折线图(仿echarts)

    遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...

  6. 【带着canvas去流浪】（2）绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  7. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

  9. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

随机推荐

  1. Python爬虫实战之爬取百度贴吧帖子

    大家好,上次我们实验了爬取了糗事百科的段子,那么这次我们来尝试一下爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 本篇目标 对百度贴吧的任意帖子进行抓取 指定是否只抓取楼主发帖 ...

  2. 推拿O2O 想说爱你还不容易

    想说爱你还不容易" title="推拿O2O 想说爱你还不容易"> <屌丝男士>第四季最后一集里,乔杉终于圆了"大保健"的梦想,可惜 ...

  3. loadrunner通过socket测接口

    #include "lrs.h" Action() {     //建立到服务端的连接     lrs_create_socket("socket1",&quo ...

  4. 一致性 Hash 算法分析

    当我们在做数据库分库分表或者是分布式缓存时,不可避免的都会遇到一个问题: 如何将数据均匀的分散到各个节点中,并且尽量的在加减节点时能使受影响的数据最少. Hash 取模 随机放置就不说了,会带来很多问 ...

  5. USB小白学习之路（11） Cy7c68013A驱动电路设计注意事项(转)

    Cy7c68013A驱动电路设计注意事项 转自:http://group.chinaaet.com/116/79029#0-tsina-1-71467-397232819ff9a47a7b7e80a4 ...

  6. Cisco模拟器的基本使用

    获取帮助查找命令 只需输入一个'?'便可得到详细的帮助信息,如果想获取c开头的命名,那么直接输入'c?'即可. 在各个模式下切换的方法 给如图所示路由器接口配置IP地址 第一步:安装HWIC-2T(串 ...

  7. Yuchuan_Linux_C编程之九目录操作相关函数

    一.整体大纲 二.相关函数 1. getcwd 函数作用:获取当前目录 头文件 #include <unistd.h> 函数原型 char *getcwd(char *buf, size_ ...

  8. 开源字体不香吗？五款 GitHub 上的爆红字体任君选

    作者:HelloGitHub-ChungZH 在编程时,用一个你喜欢的字体可以大大提高效率,越看越舒服.这篇文章就推荐 5 个在 GitHub 上优秀的字体供大家选择吧! 1. Iosevka 网站: ...

  9. 内网渗透之权限维持 - MSF与cs联动

    年初六 六六六 MSF和cs联动 msf连接cs 1.在队伍服务器上启动cs服务端 ./teamserver 团队服务器ip 连接密码 2.cs客户端连接攻击机 填团队服务器ip和密码,名字随便 ms ...

  10. ubunto 免输入密码 登录 putty ssh-keygen

    交互式密码不安全,现在改用 ssh 证书方式,不用输入密码使用公钥证书登录. 方法1, 此方法,仅试用于,仅使用win putty 来连接方式使用,如果双方都是 linux 如 rsync 同步等时, ...