最终效果图如下：

实现步骤如下：注-引用了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. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  2. Sql Server系列：Microsoft SQL Server Management Studio模板资源管理器

    模板资源管理器是Microsoft SQL Server Management Studio的一个组件,可以用来SQL代码模板,使用模板提供的代码,省去每次都要输入基本代码的工作. 使用模板资源管理器 ...

  3. OPEN CASCADE Multiple Variable Function

    OPEN CASCADE Multiple Variable Function eryar@163.com Abstract. Multiple variable function with grad ...

  4. A Simple OpenGL Shader Example II

    A Simple OpenGL Shader Example II eryar@163.com Abstract. The OpenGL Shading Language syntax comes f ...

  5. 遇到 HTTP 错误 403.14 - Forbidden？

    打开 http://localhost:1609 报错: HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容 解决方案一:设置默认首页 在 Web.conf ...

  6. MySQL参数

    1. sql_safe_updates 官方解释如下: , MySQL aborts . 默认为0,如果设置为1,则delete操作和update操作必须带有where子句,且where子句中的列必须 ...

  7. [c++] Templates

    Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...

  8. java 开发中经常问到得懒汉模式 （单利模式）

    //懒汉模式 class Single { public static Single s = null; public Single (){} public static Single getInst ...

  9. ZOJ Problem Set - 1201 Inversion

    题目:这道题目的意思让人猛地一读有点反应不过来,简单解释下: 给定序列A:a1,a2,a3....,an,如果i<j且ai>aj则(ai,aj)称为序列A的一个倒置. 之后引出了序列的倒置 ...

  10. MySQL入门01-MySQL源码安装

    操作系统:CentOS 6.7 MySQL版本:5.6.30 1.前期准备 2.系统配置 3.CMake编译配置 4.make && make install 5.后期配置和测试 Re ...