文档章节

OOP + Canvas绘制折线图

LinearLaw
 LinearLaw
发布于 2017/03/16 10:30
字数 583
阅读 23
收藏 0

最近做了一个canvas的折线图绘制的demo,用面向对象的思想封装了一下,把js部分提取一下差不多算是个小插件吧,输入x,y坐标,可以直接在页面中绘制相应的折线图。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            margin: 0 auto;
            background-color: #f0f0f0;
            border: 1px solid #999999;
        }
    </style>
</head>
<body>
<form action="">
    <input type="text" placeholder="请输入x值" id="valX"/>
    <input type="text" placeholder="请输入y值" id="valY"/>
    <input type="button" id="sub" value="PaintPoint"/>
</form>
<canvas width="600" height="600" id="cas"></canvas>

     //以上为页面结构,接下来进行封装折线图函数
<script>
    var cas = document.querySelector("#cas");
    var ctx = cas.getContext("2d");

    //        创建折线图对象,传入的参数为canvas的宽与高
    (function (window) {
        function LineChart(wid, hei) {
            this.data = [];
            this.wid = wid;
            this.hei = hei;

//            页面初始化
            this.cleanData(this.data);
            this.drawCoor();
            this.render(this.data)
        }

        LineChart.prototype = {
//            1、功能1,给页面添加坐标系
            constructor:LineChart,
            drawCoor: function () {
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.moveTo(10, 10);
                ctx.lineTo(10, this.hei - 10);
                ctx.lineTo(this.wid - 10, this.hei - 10);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(5, 15);
                ctx.lineTo(10, 10);
                ctx.lineTo(15, 15);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(this.wid - 15, this.hei - 15);
                ctx.lineTo(this.wid - 10, this.hei - 10);
                ctx.lineTo(this.wid - 15, this.hei - 5);
                ctx.stroke();
            },
//            2、功能2,给页面输出折线图
            render: function (data) {
                if (this.data.length != 1) {
                    for (var i = 0; i < data.length - 1; i++) {
                        this.drawPoint(data[i].x, data[i].y);
                        this.drawPoint(data[i + 1].x, data[i + 1].y);

                        ctx.beginPath();
                        ctx.lineWidth = 2;
                        ctx.moveTo(data[i].x, data[i].y);
                        ctx.lineTo(data[i + 1].x, data[i + 1].y);
                        ctx.stroke();
                    }
                } else {
                    this.drawPoint(data[0].x, data[0].y);
                }
            },
//            3、功能3,每次输出一个点,都给这个点描出一个方格
            drawPoint: function (x, y) {
                ctx.beginPath();
                ctx.lineWidth = 4;
                ctx.moveTo(x - 2, y - 2);
                ctx.lineTo(x + 2, y - 2);
                ctx.lineTo(x + 2, y + 2);
                ctx.lineTo(x - 2, y + 2);
                ctx.closePath();
                ctx.stroke();
            },
//            4、功能4,给data数组添加元素
            addEle: function (valX, valY) {
                this.data.push({
//                    用户输入的坐标值需要转换成canvas坐标
                    x: 10 + Number(valX),
                    y: this.hei - 10 - Number(valY)
                });
            },
//            5、整理数组,对数组进行排序
            cleanData: function (data) {
                if (this.data.length != 0) {
                    for (var i = 0; i < data.length - 1; i++) {
                        for (var j = 0; j < data.length - i -1; j++) {
                            if (data[j].x > data[j + 1].x) {
                                var temp = data[j + 1];
                                data[j + 1] = data[j];
                                data[j] = temp;
                            }
                        }
                    }
                }else {
                    return;
                }
            }
        }
//        最后,向外暴露接口
        window.LineChart = window.Line = LineChart;
    })(window);

    var chart = new Line(600, 600);
    var sub = document.getElementById("sub");

//    注册点击事件,当点击时给对象数组添加元素,元素为一个以x,y为属性的对象
    sub.onclick = function () {
        var valX = document.getElementById("valX").value;
        var valY = document.getElementById("valY").value;
        chart.drawPoint(10 + Number(valX), chart.hei - 10 - Number(valY));
        chart.addEle(valX, valY);
        chart.cleanData(chart.data);
        ctx.clearRect(0, 0, chart.wid, chart.hei);

        chart.drawCoor();
        chart.render(chart.data);
    }

</script>
</body>
</html>

效果:

© 著作权归作者所有

共有 人打赏支持
上一篇: Ajax总结
LinearLaw
粉丝 5
博文 38
码字总数 45669
作品 0
深圳
个人站长
私信 提问
canvas图表(2) - 折线图

原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那我的webGL技术就...

Jeff.Zhong
2017/11/21
0
0
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例

AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形...

sunhuaqiang1
2017/08/29
0
0
如何做到通过鼠标操作生成的折线图

最近做一个web项目,要绘制一个折线图,目前我了解可以绘制折线图的技术有canvas、highchart、echarts。但我不知道哪种技术可以实现鼠标对折线图的操作,比如修改数据,以及如何实现,望大神...

吃草的小鲨鱼
2017/02/23
52
0
自定义view--绘制折线图

general.gif 在工作之余写了个自定义View的开源项目,github代码地址,效果如上图所示。缺点是每个View只能绘制一条折线,这个功能后续待改进。 下面开始分析View是如何实现的。首先看下工程...

sg_vgt
2017/12/29
0
0
canvas 手势控制

基本介绍 关于 canvas 的基本使用,可以参考以下两个网站: Android Canvas绘图详解(图文) - 泡在网上的日子 Android中Canvas绘图基础详解(附源码下载) - CSDN博客 这里主要讲解如何将 canv...

LiuHDme
2017/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
6
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
7
0
Chocolatey 在Window搭建一个开发环境

在看了(利用 Chocolatey 快速在 Windows 下搭建一个开发环境)后,准备从零开始 一、准备工作 1、用管理员权限启动:powershell,执行错误请参考(PowerShell因为在此系统中禁止执行脚本的解...

近在咫尺远在天涯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部