前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <canvas id="cv"></canvas>
  9. <script>
  10.     var cv=document.getElementById("cv");
  11.     cv.style.border="1px solid red";
  12.     cv.width=900;
  13.     cv.height=400;
  14.     var cvt=cv.getContext("2d");
  15.     //padding为坐标到画布边框的间距,arrWidth为箭头斜边到坐标轴的间距
  16.     var padding=20,
  17.         arrWidth=10;
  18.  
  19.     //原点坐标(padding,cv.height-padding);
  20.     //x轴顶点坐标(cv.width-padding,cv.height-padding)
  21.     //y轴顶点坐标(padding,padding)
  22.  
  23.     //添加起始点
  24.     cvt.moveTo(padding,padding);
  25.     cvt.lineTo(padding,cv.height-padding);
  26.     cvt.lineTo(cv.width-padding,cv.height-padding);
  27.     //给添加的路径描边
  28.     cvt.stroke();
  29.     //y轴顶点(padding-arrWidth,padding+arrWidth),(padding+arrWidth,padding+arrWidth)
  30.     cvt.moveTo(padding-arrWidth,padding+arrWidth);
  31.     cvt.lineTo(padding,padding);
  32.     cvt.lineTo(padding+arrWidth,padding+arrWidth);
  33.     cvt.stroke();
  34.     //x轴顶点(cv.width-padding-arrWidth,cv.height-padding-arrWidth)(cv.width-padding-arrWidth,cv.height-padding+arrWidth)
  35.     cvt.moveTo(cv.width-padding-arrWidth,cv.height-padding-arrWidth);
  36.     cvt.lineTo(cv.width-padding,cv.height-padding);
  37.     cvt.lineTo(cv.width-padding-arrWidth,cv.height-padding+arrWidth);
  38.     cvt.stroke();
  39.  
  40.     //折线图的数据
  41.     //方法一:x轴的坐标(n*(cv.width-2*padding-arrWidth)/(data.length+1),)
  42.     // 计算每个点x轴坐标的思路:
  43.     // 根据x轴的宽度( 刨除了箭头的宽度 ) 以及 数据的个数,
  44.     // 两个点间距等分,来计算每两个点之间的距离 公式: pointsWidth = x轴的长度 / ( 数据的个数 + 1 )
  45.     // x轴长度: cv.width - 2 * padding - arrowWidth
  46.     // 第n个点的x轴坐标: n * pointsWidth + padding
  47.     //
  48.     // y轴的长度 = cv.height - 2 * padding - arrowWidth
  49.     // y轴的坐标 = cv.height - padding - 当前数据的值 * y轴的长度
  50.     // 第n个点的y轴坐标 = cv.height - padding - data[n] * y轴的长度
  51.     // var data= [.1,.3,.6,.4,.8,.5];  //此处数据已经是计算百分比后的,如果为不是就按下面介绍调用方法计算
  52.  
  53.     //ES5中提供的方法:map
  54.     var tempData=[ 20, 35, 38, 42, 55, 88, 99, 20, 88 ];
  55.     //借用Math.max这个方法
  56.     var maxNum=Math.max.apply(null,tempData);
  57.     //map方法的作用,会遍历一个数组并返回新的数组
  58.     var data=tempData.map(function(value,index){
  59.         return value/maxNum;
  60.     })
  61.     //方法一:使用forEach
  62.     cvt.beginPath();
  63.     data.forEach(function(value,index){
  64.         var pointX=(index+1)*(cv.width-2*padding-arrWidth)/(data.length+1);
  65.         var pointY=data[index]*(cv.height-2*padding-arrWidth);
  66.         var pointY=value*(cv.height-2*padding-arrWidth);
  67.         cvt.lineTo(pointX,pointY);
  68.     })
  69.     cvt.stroke();
  70.  
  71.     //也可用for,注意描边书写的位置不一样
  72.     for (var i = 0; i < data.length; i++) {
  73.         var pointX=(i+1)*(cv.width-2*padding-arrWidth)/(data.length+1);
  74.         var pointY=data[i]*(cv.height-2*padding-arrWidth);
  75.         cvt.lineTo(pointX,pointY);
  76.         cvt.stroke();
  77.     }
  78.  
  79. </script>
  80. </body>
  81. </html>

[canvas]利用canvas绘制自适应的折线图的更多相关文章

  1. 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图

    利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import  pandas  as pdimport  matplotlib. ...

  2. 利用JFreeChart绘制股票K线图完整解决方案

    http://blog.sina.com.cn/s/blog_4ad042e50100q7d9.html 利用JFreeChart绘制股票K线图完整解决方案 (2011-04-30 13:27:17) ...

  3. canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. IOS绘制渐变背景色折线图的一种尝试

    1.绘制折线图 上次在群里看到一个折线图划的很漂亮,自己想实现一个这样的 ,但是一直没什么头绪,不知道怎么做,就开始在网上查找划线,绘 制渐变色这一块的内容,用最笨的方式,自己尝试的写了一些,也没 有 ...

  5. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  6. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  7. iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）

    1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...

  8. VS2010 使用TeeChart画图控件 - 之二 - 绘制图形（折线图，柱状图）

    1.前期准备 详细可见VS2010 使用TeeChart画图控件 - 之中的一个 控件和类的导入 1. 1 加入TeeChart控件,给控件加入变量m_TeeChart 加入TeeChart控件,右击 ...

  9. Python使用matplotlib模块绘制多条折线图、散点图

    用matplotlib模块 #!usr/bin/env python #encoding:utf-8 ''' __Author__:沂水寒城 功能:折线图.散点图测试 ''' import rando ...

随机推荐

  1. golang笔记——map

    通过 new 创建的引用类型对象是不完整创建,比如 map,它仅分配了字典类型本身所需的内存(指针包装),而没有分配键值存储内存,也没有初始化散列桶等内部属性,因此无法工作,如下代码就是错误的: p ...

  2. java中volatile关键字的含义

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  3. nodejs开发 express路由与中间件

    路由 通常HTTP URL的格式是这样的: http://host[:port][path] http表示协议. host表示主机. port为端口,可选字段,不提供时默认为80. path指定请求资 ...

  4. [Kerberos] Java client访问kerberos-secured cluster

    使用java client访问kerberos-secured cluster,最重要的是先从admin那里拿到可用的keytab文件,用来作认证.接下来就是调整连接的配置.以下先用连接hdfs为例进 ...

  5. block要掌握的东西

    /* block要掌握的东西 1> 如何定义block变量 int (^sumBlock)(int, int); void (^myBlock)(); 2> 如何利用block封装代码 ^ ...

  6. Linux C 堆内存管理函数malloc()、calloc()、realloc()、free()详解

    C 编程中,经常需要操作的内存可分为下面几个类别: 堆栈区(stack):由编译器自动分配与释放,存放函数的参数值,局部变量,临时变量等等,它们获取的方式都是由编译器自动执行的 堆区(heap):一般 ...

  7. Linux进程间通信（七）：消息队列 msgget()、msgsend()、msgrcv()、msgctl()

    下面来说说如何用不用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linux进程间通信 -- 使用命名管道 一.什么是消息队列 消息队列提 ...

  8. Linux下，如何给PHP安装pdo_mysql扩展

    下载了一个免费开源的广告系统(openadserver),在Linux上安装时,提示要安装 pdo_mysql 扩展,先前有过编译安装 soap扩展 的经历,今天要编译安装 pdo_mysql 扩展, ...

  9. python之路八

    socket实现简单的FTP server端: import socket,osserver = socket.socket()server.bind(("localhost",9 ...

  10. android 获取Datepicker日期

    1.使用的Android5.0系统,实现上面效果使用了alertdialog 2.布局文件: layout_dataselect <?xml version="1.0" en ...