使用canvas来绘制折线图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>坐标点进行连线</title>

    <style>

        canvas{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <!-- 将今天绘制的坐标点进行连线 -->

    <canvas width="600" height="400" id="canvas"></canvas>

</body>

<script>

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    var padding = 30;

    var arrowHeight = 20,

        arrowWidth = 10;

    var x0 = padding,

        y0 = canvas.height - padding;

    var maxX = canvas.width - padding*2 -arrowHeight,

        maxY = canvas.height - padding*2 - arrowHeight;

    //绘制坐标轴

    //X轴

    ctx.moveTo(x0,y0);

    ctx.lineTo(x0,y0 - maxY-arrowHeight);

    //Y轴

    ctx.moveTo(x0,y0);

    ctx.lineTo(x0 + maxX +arrowHeight,y0);

    ctx.stroke();

    //绘制箭头

    //X轴

    ctx.beginPath();

    ctx.moveTo(x0+maxX+arrowHeight,y0);

    ctx.lineTo(x0+maxX,y0-arrowWidth*0.5);

    ctx.lineTo(x0+maxX+arrowHeight*0.5,y0);

    ctx.lineTo(x0+maxX,y0+arrowWidth*0.5);

    //Y轴

    ctx.moveTo(x0,y0-maxY-arrowHeight);

    ctx.lineTo(x0-arrowWidth*0.5,y0-maxY);

    ctx.lineTo(x0,y0-maxY-arrowHeight*0.5);

    ctx.lineTo(x0+arrowWidth*0.5,y0-maxY);

    ctx.fill();

    //绘制点

    ctx.beginPath();

    var data = [ [ 10, 20 ], [ 15, 13 ], [ 17, 30 ], [ 30, 10 ], [ 20, 15 ] ];

    //取点的数据

    /*将其中X与Y的最大值找出来，因为要做一个比例的转化：

                            点坐标/max点坐标 = 页面上点坐标/canvas的轴的最大值*/

    var pointX = Math.max.apply(null,data.map(function(v){return v[0];}));

    var pointY = Math.max.apply(null,data.map(function(v){return v[1];}));

    //法一：使用冒泡排序

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

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

            if(data[j][0]>data[j+1][0]){

                var temp = data[j +1];

                data[j+1] = data[j];

                data[j] = temp;

            }

        }

    }

    //声明一个新数组用于存储数据

    var arr = [];

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

        var tempX = data[i][0]/pointX*maxX,

            tempY = data[i][1]/pointY*maxY;

        //一定要记得坐标的最后一步转换

        var X = x0 + tempX,

            Y = y0 - tempY;

        arr.push([X,Y]);

        ctx.moveTo(X-4,Y-4);

        ctx.lineTo(X-4,Y+4);

        ctx.lineTo(X+4,Y+4);

        ctx.lineTo(X+4,Y-4);

    }

    console.log(arr);

    ctx.fill();

    //画线

    ctx.beginPath();

    //比较值，优化直线

    arr.forEach(function(v,i){

        ctx[['moveTo','lineTo'][i>0?1:0]](v[0],v[1]);

    })

    /*for(var i = 0 ; i < data.length-1 ; i++){

        var tempX = data[i][0]/pointX*maxX,

            tempY = data[i][1]/pointY*maxY;

        var tempX1 = data[i+1][0]/pointX*maxX,

            tempY1 = data[i+1][1]/pointY*maxY;

        //一定要记得坐标的最后一步转换

        var X = x0 + tempX,

            Y = y0 - tempY,

            X1 = x0 + tempX1,

            Y1 = y0 - tempY1;

        ctx.moveTo(X,Y);

        ctx.lineTo(X1,Y1);

    }*/

    ctx.stroke();

</script>

</html>

使用canvas来绘制折线图的更多相关文章

canvas+js绘制折线图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
canvas学习之折线图
接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...
用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
【带着canvas去流浪】（2）绘制折线图
目录一. 任务说明二. 重点提示三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图四. 大数据量场景示例代码托管在:https://github.com/dashnowo ...
Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
带着canvas去流浪系列之二绘制折线图
[摘要] 用canvasAPI实现echarts简易图表示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...
【Canvas】(2)---绘制折线图
绘制折线图之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

随机推荐

PHP 生成随机数组
/** 生成指定个数,以及最小最大值随机数组(包括最大值) * @parem $min 随机数组最小值 * @parem $max 随机数组最大值 * @parem $num 随机数组个数,默认max ...
字典序的第K小数字
今天zyb参加一场面试,面试官听说zyb是ACMer之后立马抛出了一道算法题给zyb:有一个序列,是1到n的一种排列,排列的顺序是字典序小的在前,那么第k个数字是什么?例如n=15,k=7, 排列顺序 ...
C# 利用Powershell获取网络相关信息
利用Get-NetAdapter获取信息 Get-NetAdapter 参考链接:https://docs.microsoft.com/en-us/powershell/module/netadapt ...
JOB&paper
我突然想到,不管我最终有没有获得一份可观的工作,但是每个公司都最终会收到我的一份简历 (3)熟悉面向对象编程: (4)熟悉TCP/IP, Http等网络协议和网络编程: 2.熟练掌握MFC.STL ...
网络知识之ipset
ipset介绍 ipset是iptables的扩展,它允许你创建匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以 ...
linux下忘记mysql的root密码
一.处理方案 #1. 结束当前正在运行的mysql进程 /etc/init.d/mysql stop #2. 用mysql安全模式运行并跳过权限验证 mysqld_safe --user=mysql ...
centos7安装SourceCodePro字体
1. 下载SourceCodePro字体,后缀应为.ttf. 2. 将字体文件复制到fonts(/usr/share/fonts)文件夹下: [root@centos fonts]# mv /home ...
storm（2）-机制
1.storm vs esper 2.storm vs spark streaming storm处理的是每次传入的一个事件:spark streaming 处理的是某个时间段窗口内的事件流. 因此 ...
http请求报文和响应报文（2）
接上篇: 3.回应报文理解回应报文,首先要弄清回应报文中的状态码. 相比于请求报文,对于响应报文,个人觉得还蛮有趣的. 主要由三部分组成:协议版本.状态码.状态码描述 3.1状态码 **常见的状态码 ...
linux 入门命令总结
1,tree -d /etc/ 参数表示只显示目录 -f 显示内容的完整 -i 不显示树枝显示完整路径2,mkdir -p 递归创建多级目录 -v 显示创建目录的过程 -m 设置目录的默认权限 mkd ...

使用canvas来绘制折线图

使用canvas来绘制折线图的更多相关文章

随机推荐

热门专题