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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="cv"></canvas>

<script>

    var cv=document.getElementById("cv");

    cv.style.border="1px solid red";

    cv.width=900;

    cv.height=400;

    var cvt=cv.getContext("2d");

    //padding为坐标到画布边框的间距,arrWidth为箭头斜边到坐标轴的间距

    var padding=20,

        arrWidth=10;

    //原点坐标(padding,cv.height-padding);

    //x轴顶点坐标(cv.width-padding,cv.height-padding)

    //y轴顶点坐标(padding,padding)

    //添加起始点

    cvt.moveTo(padding,padding);

    cvt.lineTo(padding,cv.height-padding);

    cvt.lineTo(cv.width-padding,cv.height-padding);

    //给添加的路径描边

    cvt.stroke();

    //y轴顶点(padding-arrWidth,padding+arrWidth),(padding+arrWidth,padding+arrWidth)

    cvt.moveTo(padding-arrWidth,padding+arrWidth);

    cvt.lineTo(padding,padding);

    cvt.lineTo(padding+arrWidth,padding+arrWidth);

    cvt.stroke();

    //x轴顶点(cv.width-padding-arrWidth,cv.height-padding-arrWidth)(cv.width-padding-arrWidth,cv.height-padding+arrWidth)

    cvt.moveTo(cv.width-padding-arrWidth,cv.height-padding-arrWidth);

    cvt.lineTo(cv.width-padding,cv.height-padding);

    cvt.lineTo(cv.width-padding-arrWidth,cv.height-padding+arrWidth);

    cvt.stroke();

    //折线图的数据

    //方法一:x轴的坐标(n*(cv.width-2*padding-arrWidth)/(data.length+1),)

    // 计算每个点x轴坐标的思路:

    // 根据x轴的宽度( 刨除了箭头的宽度 ) 以及 数据的个数,

    // 两个点间距等分,来计算每两个点之间的距离 公式: pointsWidth = x轴的长度 / ( 数据的个数 + 1 )

    // x轴长度: cv.width - 2 * padding - arrowWidth

    // 第n个点的x轴坐标: n * pointsWidth + padding

    //

    // y轴的长度 = cv.height - 2 * padding - arrowWidth

    // y轴的坐标 = cv.height - padding - 当前数据的值 * y轴的长度

    // 第n个点的y轴坐标 = cv.height - padding - data[n] * y轴的长度

    // var data= [.1,.3,.6,.4,.8,.5];  //此处数据已经是计算百分比后的,如果为不是就按下面介绍调用方法计算

    //ES5中提供的方法:map

    var tempData=[ 20, 35, 38, 42, 55, 88, 99, 20, 88 ];

    //借用Math.max这个方法

    var maxNum=Math.max.apply(null,tempData);

    //map方法的作用,会遍历一个数组并返回新的数组

    var data=tempData.map(function(value,index){

        return value/maxNum;

    })

    //方法一:使用forEach

    cvt.beginPath();

    data.forEach(function(value,index){

        var pointX=(index+1)*(cv.width-2*padding-arrWidth)/(data.length+1);

        var pointY=data[index]*(cv.height-2*padding-arrWidth);

        var pointY=value*(cv.height-2*padding-arrWidth);

        cvt.lineTo(pointX,pointY);

    })

    cvt.stroke();

    //也可用for,注意描边书写的位置不一样

    for (var i = 0; i < data.length; i++) {

        var pointX=(i+1)*(cv.width-2*padding-arrWidth)/(data.length+1);

        var pointY=data[i]*(cv.height-2*padding-arrWidth);

        cvt.lineTo(pointX,pointY);

        cvt.stroke();

    }

</script>

</body>

</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. java中volatile关键字的含义

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

  2. [译]git的那些flag

    git add -p console有一个交互式的界面(如下图),让你一个一个文件的选择是add还是不add.注意这些文件必须是tracked过的, 也就是说如果你的新的文件从来没有add过,那么他不 ...

  3. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  4. Python ORM Storm 源码修改

    安装 storm : pip install storm 目标:修改 Storm 源代码以支持自动重连文件:python安装目录/site-packages/storm/database.py 在41 ...

  5. poj 1192

    此题亦一眼看出算法,一次AC. 没什么好讲的,就是一个普通的树形动规. 用dp[n][0]表示n号顶点不取时的最大值,dp[n][1]表示n号顶点取时的最大值. dp[n][0]=max{dp[x][ ...

  6. 前端XSS攻击和防御

    xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会 ...

  7. tomcat不安全因素

    tomcat的提供了一个非常方便的manager系统,可以远程上传war项目,运行项目,但是这也是一个非常危险的地方,我曾经开发过一块B/S架构的小系统,提供了本地文件扫描,文件浏览,扫描等功能,并且 ...

  8. Java的内存机制

    Java 把内存划分成两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java 就在栈中为这个变量分配内存空 ...

  9. 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(转)

    我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.N ...

  10. float 比较， 这是一个坑

    为了方便随机关键产品数据,做了一个随机值列的方案,列字段类型设置为float. 在测试的两个随机值的时候, 故意设置了几个随机值相同保存到数据库表中, 这样问题就出来了. 详细如下: 当进行小于比较的 ...