<!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. .net垃圾回收机制编程调试试验

    1. 什么是CLR GC? 它是一个基于引用跟踪和代的垃圾回收器. 从本质上,它为系统中所有活跃对象都实现了一种引用跟踪模式,如果一个对象没有任何引用指向它,那么这个对象就被认为是垃圾对象,并且可以被 ...

  2. 《Effective Java》学习笔记——积累和激励

    从一个实际案例说起 国庆长假前一个礼拜,老大给我分配了这么一个bug,就是打印出来的报表数量为整数的,有的带小数位,有的不带,毫无规律. 根据短短的两个多月的工作经验以及猜测,最终把范围缩小到以下这段 ...

  3. [转]Android Binder设计与实现 - 设计篇

    摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC手段,却还要倚赖Binder来实现进程间通信,说明Binder ...

  4. Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程

    10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...

  5. Java访问Hbase

    1.kerberos验证 a.下载对应版本JCE(Java Cryptography Extension),解压拷贝local_policy.jar/US_export_policy.jar到$JAV ...

  6. Android开发学习之路-插件安装、检查应用是否安装解决方案

    使用Bmob的时候,如果需要用到支付功能,就需要让应用去安装一个支付插件.而一般的做法是将插件放置在assets目录中,当用户需要支付,先检查是否能支付,不能的话,提示安装插件.代码: public ...

  7. Atitit MATLAB 图像处理attilax总结

    Atitit MATLAB 图像处理attilax总结 1.1. 下载 Matlab7.0官方下载_Matlab2012 v7.0 官方简体中文版-办公软件-系统大全.html1 1.2. Matla ...

  8. Hibernate 命名查询

    1.定义 Hibernate允许在映射配置文件中定义字符串形式的查询语句,这种查询方式被称为命名查询. 2.创建表结构并添加测试数据 create table `student` ( `id` dou ...

  9. Eclipse 使用技巧

    1.Eclipse 格式化代码时不换行与自动换行 Eclipse 推荐的编码风格默认是80列换行.每次用Eclipse自带的Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Ecli ...

  10. PHP_02之使用补充

    JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据:  PHP:   $arr=[...];   echo json_encode($arr);  JS:   var ob ...