<!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. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

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

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

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

  4. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

  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. PowerShell 数组以及XML操作

    PowerShell基础 PowerShell数组操作 将字符串拆分成数据的操作 cls #原始字符串 $str = "abc,def,ghi,mon" #数据定义 #$StrAr ...

  2. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

  3. 学习笔记：delphi之TStringGrid

    1.说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼... 的需求是显示一个类似于Word/excel的那种表格,可以合并列等 ...

  4. 我的MYSQL学习心得（九） 索引

    我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  5. ubuntu 启动MySql和安装python的MySQLdb模块

    ubuntu一般会自己预安装mysql,你只需 /etc/init.d/mysql start|stop|restart|reload|force-reload|status  命令便可以实现mysq ...

  6. redhat7 修改hostname

    修改linux redhat的 hostname 其实有好一些陷阱.. 通常 我们修改 /etc/sysconfig/network 的 HOSTNAME 变量即可 但是它不会立即生效, 需要执行下面 ...

  7. node.js里npm install --save 与 npm install --save-dev 的区别

    在package.json可以看到一个放在package.json 的dependencies , 一个放在devDependencies里面. 目前找到的一些解答:真正跑在用户浏览器中的代码,比如j ...

  8. HTML5系列目录

    1. HTML5与HTML4的区别 2. HTML5结构 3. HTML5表单 4. HTML5文件 5. HTML5绘图 6. HTML6本地存储

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（7）-MVC与EasyUI DataGrid

    系列目录 本节知识点 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI读取MVC后台Json数据 开始实现 我们的系统似乎越来越有趣了 首先从前端入手,开打View下面的Sh ...

  10. MUI 个推获取ClientID的方法

               本次是获取个推ClientID的方法              //监听消息开始             document.addEventListener("plus ...