<!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. Linux实战教学笔记01:计算机硬件组成与基本原理

    标签(空格分隔): Linux实战教学笔记 第1章 如何学习Linux 要想学好任何一门学问,不仅要眼睛看,耳朵听,还要动手记,勤思考,多交流甚至尝试着去教会别人. 第2章 服务器 2.1 运维的基本 ...

  2. linux字符串url编码与解码

    编码的两种方式 echo '手机' | tr -d '\n' | xxd -plain | sed 's/\(..\)/%\1/g' echo '手机' |tr -d '\n' |od -An -tx ...

  3. 【腾讯Bugly干货分享】基于RxJava的一种MVP实现

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bfef673c1174283d60bac0 Dev Club 是一个交流移动 ...

  4. .NET中使用Redis (二)

    很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务端,以及如何在.NET中调用Redis读取数据.本文简单介绍如何设计NoSQL数据库,以及如何使用Redis来存储对象. 和 ...

  5. ASP.NET MVC Model验证(四)

    ASP.NET MVC Model验证(四) 前言 本篇主要讲解ModelValidatorProvider 和ModelValidator两种类型的自定义实现,前者是Model验证提供程序,而Mod ...

  6. ABP源码分析三十六：ABP.Web.Api

    这里的内容和ABP 动态webapi没有关系.除了动态webapi,ABP必然是支持使用传统的webApi.ABP.Web.Api模块中实现了一些同意的基础功能,以方便我们创建和使用asp.net w ...

  7. LeetCode-2AddTwoNumbers(C#)

    # 题目 2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The di ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（17）-LinQ动态排序

    系列目录 首先修复程序中的一个BUG这个BUG在GridPager类中,把sord修改为sort这个名称填写错误,会导致后台一直无法获取datagrid的排序字段 本来是没有这一讲的,为了使20行的代 ...

  9. KindEditor 给KindEditor赋值

    在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...

  10. 9.JAVA之GUI编程列出指定目录内容

    代码如下: /*列出指定目录内容*/ import java.awt.Button; import java.awt.FlowLayout; import java.awt.Frame; import ...