<!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. windows下mongodb配置

    打开cmd(windows键+r输入cmd)命令行,进入D:\mongodb\bin目录(如图先输入d:进入d盘然后输入cd d:\mongodb\bin), 输入如下的命令启动mongodb服务: ...

  2. 从myeclipse导入eclipse，不能识别为web项目（java项目转为web项目）

    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存:         ...

  3. Hello Jexus

    一.关于 CentOS CentOS(Community Enterprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照 ...

  4. Mono 3.2.3 TCP吞吐性能测试报告

    在前几天简单地测试了一下Mono 3.2.3 TCP处理的稳定性,有同学问Mono 3.2.3的TCP处理性有怎样,以下是针对Mono 3.2.3TCP在吞吐方面的性能测试.主要测试分两种场分别是连接 ...

  5. JS or C#？不存在的脚本之争

    前言: 又来到了周末,小匹夫也终于有了喘口气写写博客的时间和精力.话说周五的下午,小匹夫偶然间晃了一眼蛮牛的QQ群,又看到了一个Unity3D开发中老生长谈的问题,“我的开发语言究竟是选择JavaSc ...

  6. 我所理解的SOA和微服务

    本文原创,原文地址为:http://www.cnblogs.com/fengzheng/p/5847441.html SOA和微服务到底是什么关系? 说实话,我确实不明白SOA和微服务到底有什么本质上 ...

  7. Java在DOS命令下的运行及其API文档制作过程

    该文档主要描述java程序在DOS命令下的运行,以及一些常用的命令 常用DOS命令: d: 回车 盘符切换 dir(directory):列出当前目录下的文件以及文件夹 md (make direct ...

  8. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  9. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  10. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...