<!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绘制折线图(仿echarts)

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

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

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

  6. html5绘制折线图

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

  7. php中用GD绘制折线图

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

  8. 使用Canvas绘制背景图

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

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

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

随机推荐

  1. 服务器判断http是否中断

    一般来说,只需要send或者recv一下,如果结果为零,则为掉线. 1.当recv返回值为0是表示对方已经正常(MSDN说是完美的)的断开连接.2.当recv返回SOCKET_ERROR时,说明对方已 ...

  2. jsoup开发网页客户端3

    这个系列好久没更新,最近好忙,老大说未来是Html5的,所以最近一直学习前端以及Html5的一些东西.Android5.0的诞生,让我们眼前一亮,独特的Material风格更是吸引了无数人. 话说不学 ...

  3. cvInRangeS函数演示

    camshift算法中,用到了cvInRangeS函数,作为初学者,对这个函数很不理解,所以就写了个程序演示效果,加强理解. 代码: #include "cv.h" #includ ...

  4. HDU3348(贪心求硬币数

    ;} coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. C#基础之方法参数

    params params 关键字可以指定在参数数目可变处采用参数的方法参数. 在方法声明中的 params 关键字之后不允许任何其他参数,并且在方法声明中只允许一个 params 关键字 publi ...

  6. 模块(module)

    1.模块加载 import math  //import后面跟模块名 from module1 import module11  //module1是一个大模块,里边有子模块module11,调用这个 ...

  7. 计算C#程序执行时间

    static void SubTest()   {       DateTime beforDT = System.DateTime.Now;            //耗时巨大的代码         ...

  8. ASP.NET界面重定向传值

    这么说吧,当程序启动时,ASP.NET会自动创建一些经常使用的类的实例,而这些实例就是ASP.NET的内置对象,常用的实例对象有:Response(来自HttpResponse类).Request(来 ...

  9. App上架流程[利用Archive进行上传]

    作者 M_Lee2016.01.22 10:47 写了14852字,被32人关注,获得了49个喜欢 [iOS]App上架流程[利用Archive进行上传] 字数2186 阅读507 评论3 喜欢9 今 ...

  10. WebGL之shaderToy初使用

    做图形就要玩shader,我的shader进阶之路,从学习怎么使用shaderToy开始.首先介绍我是看哪篇文章学习的,给出参考文章地址:https://blog.csdn.net/xufeng099 ...