<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>用canvas绘制折线图</title>
 </head>
 <body>
     <canvas id="cv"></canvas>
 </body>
 </html>
 <script>
     var cv = document.getElementById("cv");
     cv.width = 600;
     cv.height = 400;
     cv.style.border = "1px solid red";
     var ctx = cv.getContext("2d");
     var data2 = [.3, .1, .2, .4, .2, .7, .3, .9];
     var data3 = [3, 12, 14, 17, 29, 33, 40, 52];

     getBrokenLine(data2, "#f00");
     getBrokenLine(data3, "#0f0");

     //封装一个折线图的函数
     function getBrokenLine(data, color) {
         var maxNum = Math.max.apply(null, data);    //求数组中的最大值
         var padding = 20,  //边距
                 x0 = padding,  //原点x轴坐标
                 y0 = cv.height - padding,  //原点y轴坐标
                 xArrow_x = padding, //x轴箭头处坐标x
                 xArrow_y = padding, //x轴箭头处坐标y
                 yArrow_x = cv.width - padding,  //y轴箭头处坐标x
                 yArrow_y = cv.height - padding, //y轴箭头处坐标y
                 arrowWidth = 10,    //箭头的宽度
                 xLength = cv.width - 2*padding - arrowWidth,    //x轴的长度
                 yLength = cv.height - 2*padding - arrowWidth,  //y轴的长度
                 pointsWidth = xLength/(data.length + 1);    //折线上每个点之间的距离

         ctx.beginPath();//控制绘制的折线不受坐标轴样式属性的影响
         //绘制x轴
         ctx.moveTo(x0, y0);
         ctx.lineTo(xArrow_x, xArrow_y);
         ctx.moveTo(xArrow_x, xArrow_y);
         ctx.lineTo(xArrow_x - arrowWidth, xArrow_y + arrowWidth);
         ctx.moveTo(xArrow_x, xArrow_y);
         ctx.lineTo(xArrow_x + arrowWidth, xArrow_y + arrowWidth);

         //绘制y轴
         ctx.moveTo(x0, y0);
         ctx.lineTo(yArrow_x, yArrow_y);
         ctx.moveTo(yArrow_x, yArrow_y);
         ctx.lineTo(yArrow_x - arrowWidth, yArrow_y - arrowWidth);
         ctx.moveTo(yArrow_x, yArrow_y);
         ctx.lineTo(yArrow_x - arrowWidth, yArrow_y + arrowWidth);
         ctx.strokeStyle = "#000";

         //中断(坐标轴和折线的)连接
         ctx.stroke();
         ctx.beginPath();

         //绘制折线
         for (var i = 0; i < data.length; i++) {
             var pointX = padding + (i + 1) * pointsWidth;
             var pointY = padding + arrowWidth + (1 - data[i]/maxNum) * yLength;
             ctx.lineTo(pointX, pointY);
         }
         ctx.strokeStyle = color;
         ctx.stroke();
     }
 </script>

效果图如下:

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

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

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

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

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

  3. 【带着canvas去流浪】(2)绘制折线图

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

  4. html5绘制折线图

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

  5. php中用GD绘制折线图

    php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...

  6. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  7. UUChart的使用--iOS绘制折线图

    UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图. 二.下载地址: https://github.com/ZhipingYang/UUChartView 三.使用 第一步.首先我们将下载 ...

  8. JFreeChart绘制折线图实例

    JFreeChart是JAVA平台上的一个开放的第三方图表绘制类库.只要下载JFreeChart的类库,导入项目即可使用.下面是一个绘制折线图的实例.各处注释都已经写的比较清晰了. package c ...

  9. python使用matplotlib绘制折线图教程

    Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...

随机推荐

  1. xml给提示

    1.     FAQ:不给提示: a)     window – preferences – myeclipse – xml – xml catalog b)     User Specified E ...

  2. keepalived+mysql双主复制高可用方案

    MySQL双主复制,即互为Master-Slave(只有一个Master提供写操作),可以实现数据库服务器的热备,但是一个Master宕机后不能实现动态切换.而Keepalived通过虚拟IP,实现了 ...

  3. linux之sed

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...

  4. Qt之启动外部程序(使用参数很全面,还使用了setProcessChannelMode)

    简述 QProcess可以用来启动外部程序,并与它们交互. 要启动一个进程,通过调用start()来进行,参数包含程序的名称和命令行参数,参数作为一个QStringList的单个字符串. 另外,也可以 ...

  5. Python全栈之路-Day33

    1 time模块 #!/usr/bin/env python # __Author__: "wanyongzhen" # Date: 2017/4/7 import time # ...

  6. 1.javascript节点的操作 创建、添加、移除、移动、复制、插入(修改)

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  7. Oracle中SQL调优(SQL TUNING)之最权威获取SQL执行计划大全

    该文档为根据相关资料整理.总结而成,主要讲解Oracle数据库中,获取SQL语句执行计划的最权威.最正确的方法.步骤,此外,还详细说明了每种方法中可选项的意义及使用方法,以方便大家和自己日常工作中查阅 ...

  8. 如何查看App provision profile文件中的钥匙链访问组名称

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们因为某些原因希望安全的在多个App中共享一些信息,我们可以 ...

  9. DesigningFormsinAccess2010

  10. webpack的知识内容

    webpack的构建工具: 浏览器的兼容性? 转换ES6语法: 转化JSX: css