最终效果图如下：

实现步骤如下：注-引用了jQuery

HTML代码

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>canvas绘制折线图</title>

  <script src="scripts/jquery-1.11.3.js"></script>

  <script src="scripts/recordPaint.js"></script>

  <style>

  </style>

 </head>

 <script>

    $(function(){

         /*

             * 定义绘制折线图的关键数据(12个月的消费记录-金额)

             * 封装函数专门用于绘制折线图

               recordPaint(Elem,Data)方法

               * Elem - 表示<canvas>元素

               * Data - 表示关键数据

          */

         var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];

         recordPaint($("#recordCvs")[0],datas);

    });

 </script>

 <body>

    <div id="recordContent">

        <canvas id="recordCvs" width="600" height="400"></canvas>

    </div>

 </body>

</html>

JS代码：即HTML中引用的外部JS文件<script src="scripts/recordPaint.js"></script>

/**

 * Created by walker on 2015/11/26.

 * 定义recordPaint()方法

 */

function recordPaint(Elem,Data){

    // 1. 创建画布对象

    var context = Elem.getContext('2d');

    // 2. 获取画布的宽度和高度

    const WIDTH = Elem.width;

    const HEIGHT = Elem.height;

    // 3. 定义坐标轴相对画布的内边距

    var padding = 20;//初始化内边距

    var paddingLeft = 60;//至少大于绘制文字的宽度

    var paddingBottom = 30;//至少大于绘制文字的高度

    // 4. 定义绘制坐标轴的关键点的坐标值

    var axisY = {// y轴的起点坐标值

        x : paddingLeft,

        y : padding

    };

    var origin = {// 原点坐标值(x轴与y轴相交点)

        x : paddingLeft,

        y : HEIGHT - paddingBottom

    };

    var axisX = {

        x : WIDTH - padding,

        y : HEIGHT - paddingBottom

    };

    // 5. 绘制坐标轴

    context.beginPath();

    context.moveTo(axisY.x,axisY.y);

    context.lineTo(origin.x,origin.y);

    context.lineTo(axisX.x,axisX.y);

    context.stroke();

    // 6. 绘制坐标轴的箭头

    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

    }

    // 设置字体

    context.font = "14px 微软雅黑";

    // 设置垂直对齐

    context.textBaseline = "top";

    for(var i=1;i<=12;i++){

        pointsX[pointsX.length] = month.x;

        // 绘制月份信息

        context.fillText(i+"月",month.x,month.y);

        // 改变每次绘制的x坐标轴的值

        month.x += (axisX.x - origin.x)/12;

    }

    // 绘制y轴的金额

    // 从众多的关键金额中,取到最高金额

    /*

    var datas = [];

    for(index in Data){

        datas[datas.length] = Data[index];

    }

    function sortNumber(a,b){

        return a - b;

    }

    var max = datas.sort(sortNumber)[datas.length-1];

    */

    var max = Math.max.apply(Math,Data);

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

        // y轴向下移动(增加)

        money.y += moneyY;

        // 金额每次减500

        money.jin -= 500;

    }

    /*

      绘制折线

      * 12个折点的x轴值，对应12个月文字的x轴值

      * 折点的y轴值等于原点的y轴值-折点到原点的距离

        * 折点到原点的距离 = (3000点的y到原点的y的长度)*当前金额/3000

     */

    context.beginPath();

    for(var i=0;i<Data.length;i++){

        // 获取折点的x和y值

        var pointY = origin.y - (origin.y - (axisY.y + moneyY))*Data[i]/max;

        var pointX = pointsX[i];

        // 绘制折线

        if(i == 0){

            context.textAlign = "left";

            //context.textBaseline = "bottom";

            context.moveTo(pointX,pointY);

        }else{

            context.textAlign = "center";

            context.textBaseline = "bottom";

            context.lineTo(pointX,pointY);

        }

        // 绘制折点的金额

        context.fillText(Data[i],pointX,pointY);

    }

    context.stroke();

    // 绘制12个折点的圆

    for(var i=0;i<Data.length;i++){

        // 获取折点的x和y值

        var pointY = origin.y - (origin.y - (axisY.y + moneyY))*Data[i]/max;

        var pointX = pointsX[i];

        // 绘制圆

        context.fillStyle = "red";

        context.beginPath();

        context.arc(pointX,pointY,3,0,Math.PI*2);

        context.fill();

    }

}

　　总结：每个拐点的坐标值要清晰

canvas绘制经典折线图(一)的更多相关文章

  1. canvas图表(2) - 折线图

    原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...

  2. canvas学习之折线图

    接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...

  3. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. JFreeChart绘制XY折线图（工具类设计）

    准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...

  5. Html5 canvas 绘制彩票走势图

    因须要 要实现一个类似彩票走势图的功能,初次学Html5 ,非常多地方不明白,前段时间也发帖请教过这个问题.也是没给个明白说话,在网上搜了非常多,也没有实现的样例,今天细致研究了下.发现事实上也不是非 ...

  6. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...

  7. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

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

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

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

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

随机推荐

  1. Android知识——ViewHolder的作用与用法

    ViewHolder通常出现在适配器里,为的是listview滚动的时候快速设置值,而不必每次都重新创建很多对象,从而提升性能.在android开发中Listview是一个很重要的组件,它以列表的形式 ...

  2. jsp 分页， 判断是第一页，和最后一页.

    <% //页的行数 int pagesize =20; //当前页 int currentPage = 1; try { currentPage = Integer.parseInt(reque ...

  3. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  4. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

  5. 深入理解DOM节点类型第三篇——注释节点和文档类型节点

    × 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...

  6. 将 instance 连接到 first_local_net - 每天5分钟玩转 OpenStack（82）

    上一节 first_local_net 已经就绪,下面创建 instance 并将其连接到该网络. 将 instance 连接到 first_local_net launch 一个 instance, ...

  7. 搞懂$.each和$(selector).each

    $.each:该方法用于遍历任何集合,包括数组和对象 $(selector).each:该方法用于遍历Jquery对象 语法:$.each(obj,callback,args) ①遍历数组 var a ...

  8. hibernate笔记--组合主键映射方法

    一个数据库表中其主键有可能不止一个属性,同样映射到实体类中,可能有两个或多个属性共同配置成为一个主键,假设一个实体类Score,其主键有两个属性stuId(学生编号)和subjectId(科目编号), ...

  9. IO多路复用之select总结

    1.基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程.IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/ ...

  10. 一个简单的Webservice的demo,简单模拟服务

    前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...