最终效果图如下：

实现步骤如下：注-引用了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. php 操作数组（合并，拆分，追加，查找，删除等）（转载）

    1. 合并数组 array_merge()函数将数组合并到一起,返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次迫加.其形式为: array array_merg ...

  2. 引用类型-RegExp类型

    JavaScript高级程序设计(第三版)笔记-第五章-RegExp类型 定义正则表达式有两种方式 1.用字面量形式定义正则表达式: ver expression = /patterns/flags; ...

  3. 为什么更喜欢Outlook，而不是Gmail

    让我写这篇博客主要前段时间dudu写了一篇关于Google Gmail年龄限制问题,导致博客园管理员Gmail账号会被删除,里面的邮件无法迁移出来.围观地址:http://www.cnblogs.co ...

  4. Android开发中的menu菜单

    复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...

  5. C#基于两种需求向图片添加水印

    使用场景 1.也就是大家经常用的,一般是图片的4个角落,基于横纵坐标来添加. 2.在图片内基于固定位置,文字始终居中.刚开始我基于第一种场景来根据水印汉字的长度来计算坐标,后来发现方法始终不可靠.现在 ...

  6. 【集合框架】JDK1.8源码分析HashSet && LinkedHashSet（八）

    一.前言 分析完了List的两个主要类之后,我们来分析Set接口下的类,HashSet和LinkedHashSet,其实,在分析完HashMap与LinkedHashMap之后,再来分析HashSet ...

  7. 【Python实战】Scrapy豌豆荚应用市场爬虫

    对于给定的大量APP,如何爬取与之对应的(应用市场)分类.描述的信息?且看下面分解. 1. 页面分析 当我们在豌豆荚首页搜索框输入微信后,会跳转到搜索结果的页面,其url为http://www.wan ...

  8. 让我们一起用开源数据库和开源框架废弃Access

    一.为什么要废弃Access? 1.客户的机子上需要安装access的驱动 ps:这个比较烦人,大家都知道部署越简单越好,安装这个对用户来说太繁琐了. 2.操作时性能不佳 using System; ...

  9. 你必须知道ASP.NET知识------关于动态注册httpmodule(对不起汤姆大叔)

    一.关于动态注册的问题 很多人看过汤姆大叔的MVC之前的那点事儿系列(6):动态注册HttpModule ,其实汤姆大叔没有发现httpmodule动态注册的根本机制在哪里. 亦即:怎么动态注册?为什 ...

  10. JS产生随机数的几个用法！

    <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); ret ...