js以面向对象的思维利用canvas绘制折线图

最新推荐文章于 2022-07-22 23:05:59 发布
最新推荐文章于 2022-07-22 23:05:59 发布
阅读量337 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hgzzzz/article/details/82893842
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制折线图</title>
    <style>
        canvas{
            border: 1px solid #eee;
            border-right: none;
            border-bottom: none;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <script>
            // 利用面向对象的思想画折线图
            // 1. 构造方法
            function lineChart(ctx) {
                this.ctx = ctx || document.querySelector('canvas').getContext('2d');
                // 画布大小
                this.canvasWidth = this.ctx.canvas.width;
                this.canvasHeight = this.ctx.canvas.height; 
                // 网格大小
                this.gridSize = 10;
                // 坐标系的间距
                this.space = 20;
                // 坐标箭头的大小
                this.arrowSize = 10;
                // 绘制点 点的大小
                this.dottedSize = 6;
                // 原点坐标
                this.x0 = this.space;
                this.y0 = this.canvasHeight - this.space;

            }
            // 2. 行为方法
            // 初始化
            lineChart.prototype.init = function(data) {
                this.drawGrid();
                this.drawAxis();
                this.drawDotted(data);

            };

            // 绘制网格
            lineChart.prototype.drawGrid = function() {
            // 画 x 轴的网格线
            var ctx = this.ctx;
            var grid = this.gridSize;
            var xLine = Math.floor(this.canvasHeight / grid);
            for (var i = 0; i <= xLine; i++){
                ctx.beginPath();
                ctx.moveTo(0, grid * i - 0.5);
                ctx.lineTo(this.canvasWidth, grid * i - 0.5);
                ctx.strokeStyle = '#eee';
                ctx.stroke();
            }
            // 画 y 轴的网格线
            var yLine = Math.floor(this.canvasWidth / grid);
            for (var i = 0; i <= yLine; i++){
                ctx.beginPath();
                ctx.moveTo(grid * i - 0.5, 0);
                ctx.lineTo(grid * i - 0.5,this.canvasHeight);
                ctx.strokeStyle = '#eee';
                ctx.stroke();
            }
            };     
            // 绘制坐标系
            lineChart.prototype.drawAxis = function() {
            // 2.1 计算原点
            var space = this.space;
            var arrowSize = this.arrowSize;
            var ctx = this.ctx;
            var canvasWidth = this.canvasWidth;
            var canvasHeight = this.canvasHeight;

            var x0 = this.x0;
            var y0 = this.y0;

            // 2.2 绘制 x 轴
            ctx.beginPath();
            ctx.moveTo(x0, y0);
            ctx.lineTo(canvasWidth - space, y0);
            ctx.strokeStyle = '#000';
            ctx.stroke();     
            // 坐标箭头
            ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
            ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
            ctx.lineTo(canvasWidth - space, y0);
            ctx.fill();
            

            // 2.3 绘制 y 轴
            ctx.beginPath();
            ctx.moveTo(x0, y0);
            ctx.lineTo(x0, space);
            ctx.strokeStyle = '#000';
            ctx.stroke();
            // 坐标箭头
            ctx.lineTo(x0 - arrowSize / 2, space + arrowSize);
            ctx.lineTo(x0 + arrowSize / 2, space +  arrowSize);
            ctx.lineTo(x0, space);
            ctx.fill();
            };
            // 绘制点
            lineChart.prototype.drawDotted = function(data) {
                var _this = this;
                var ctx = this.ctx;
                var dottedSize = this.dottedSize;

                // 记录当前坐标 方便连线
                var prevCanvasX = 0;
                var prevCanvasY = 0;
                data.forEach(function(coordinate, index){
                    // 数据的坐标需要转换成 canvas 坐标
                    coordinate.x += _this.x0 ;
                    coordinate.y = _this .y0 - coordinate.y;
                    // 绘制点
                    ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2);
                    ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2);
                    ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2);
                    ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2);
                    ctx.closePath();
                    ctx.fill();
                    // 点的连线
                    // 第一个点连原点
                    if (index == 0){
                        ctx.beginPath();
                        ctx.moveTo(_this.x0, _this.y0)
                        ctx.lineTo(coordinate.x, coordinate.y);
                        ctx.stroke();
                    }else { // 不是第一个点连上一个点
                        ctx.beginPath();
                        ctx.moveTo(prevCanvasX, prevCanvasY)
                        ctx.lineTo(coordinate.x, coordinate.y);
                        ctx.stroke();
                    }
                    prevCanvasX = coordinate.x;
                    prevCanvasY = coordinate.y;
                });
            };


            // 点坐标
            var data = [
                { 
                    x : 100,
                    y : 100
                },
                {
                    x : 200,
                    y : 160 
                },
                {
                    x : 300,
                    y : 240
                },
                {
                    x : 400,
                    y : 320
                },
                {
                    x : 500,
                    y : 80
                }
            ];
            // 根据数据实例初始化
            var lineChart = new lineChart();
            lineChart.init(data);
    </script>
</body>
</html>

在这里插入图片描述

hgzzzz
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现折线图（canvas详解）
kitty_ELF的博客
04-16 6822
这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图，所以我就从canvas开始学习了。 首先给大家看一下通过学习，我最后完成的折线图： 内容： x轴及平行刻度线 x轴、y轴坐标刻度 折点的数据显示 缺点： 线条样式的动态变换 y轴刻度算法 一点都不酷炫！！！ 一、Canvas介绍1、画布的创建2、设置画布的宽高和背景色3、设置渐变色3.1、线性渐变3.2、放射状/圆形渐变4、画布的变换4.1画布平移（translate）4.2、画布旋转（rotate）4.3 画布缩
CanvasJS动态折线图
熙冰
09-29 6119
在寻找折线图插件时候，发现了CanvasJS，文档写的很详细，方便易懂。 在写这个时候参照了官网的两个示例，一个是JavaScript Line Charts with Data or Line Markers，另一个是JavaScript Charts & Graphs with Images on top。 html lang="en"> head> meta charset
php 折线图canvas,JavaScript canvas绘制折线图
weixin_42097533的博客
03-12 131
本文实例为大家分享了canvas绘制折线图的具体代码，供大家参考，具体内容如下Titlecanvas {border: 1px solid #ccc;}/*1.构造函数*/var LineChart = function (ctx) {/*获取绘图工具*/this.ctx = ctx || document.querySelector('canvas').getContext('2d');/*画布...
如何用canvas画一个漂亮的箭头用于永中文档批注场景
codingMonkeyKing的博客
06-17 1507
用canvas画一个漂亮的箭头
canvas折线图
cjx177187的博客
07-22 479
利用连接起点到终点，将上一个的终点当作下一个线条的起点，再次连接，重复直至遍历所有的数据，就成为了折线图。//重新修改canvas宽度，相当于canvas重写，因为修改了canvas的宽度在js中相当于修改了canvas的编码，所以相当于重写。利用for循环遍历假数据，将假数据作为点的Y坐标添加到网格图中。//添加计时器，定时往数组中添加一个130-70的随机数。//添加计时器，定时清楚线条和重新画图【网格图和折线图】//遍历数组画出折线图,将数组中的数据当作y坐标画出来。//画一个60×60的网格图。..
JavaScript canvas绘制折线图
10-15
在JavaScript中，Canvas API是一个强大...通过以上步骤，我们可以利用JavaScript和Canvas API实现自定义的折线图，灵活地展示和解析各种数据集。这对于数据分析、监控系统或者任何需要动态数据可视化的应用都非常有用。
微信小程序demo：利用canvas绘制折线图
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
原生canvas实现折线图封装
07-01
canvas画折线图
JS+html5 canvas实现的简单绘制折线图效果示例
10-20
主要介绍了JS+html5 canvas实现的简单绘制折线图效果,结合实例形式分析了js结合HTML5 canvas技术实现图形绘制的数值运算与数组遍历等操作技巧,需要的朋友可以参考下
前端------ canvas 绘制折线图详解
qq_39429962的博客
09-19 9384
canvas时html5新添加的一个画布标签。 他有很多属性，大家可以在下边网址查看： http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布canvas中涉及到坐标运算，它是以浏览器空白左上角为起点，然后根据像素进行变化的一个元素，话不多说，下边是一个折线图的demo： 效果图如下： 源代码： &lt;!DOCTYPE ht...
js动态折线图
07-19
含案例 画圆形 直线 椭圆形 动态添加div画线 绝对有用
HTML5 Canvas 3D折线图表.zip
07-04
HTML5 Canvas 3D折线图表是一款基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同。
canvas折线图Api(带鼠标事件)
02-14
清晰简洁的api，，文件不大，但功能完善；；带坐标，节点，鼠标接触节点的动态显示坐标的事件、、、至于传值方面、所用的方式是json格式（类似数组）,可以显示多个canvas图和每个图的多个颜色的折线、、、功能可谓完全
canvas-2:canvas 折线图
05-12
canvas-2 canvas 折线图
用JS写的一个好看的折线图
热门推荐
拿铁不懂绿茶
02-28 1万+
之前做移动端项目的时候，有要显示图表的需求， 但是由于设计师设计的太漂亮， 一般的第三方控件不加修改的话都不太满足， 如果引进了的话， 要修改的东西太多了， 也不好修改，废话不多说， 先上图：至于怎么实现了，其实也蛮简单的，canvas自己一个个画的。以下是源码：/** * Created by freeson on 2017/10/24. */ export const lineChart...
html5画折线图,canvas折线图绘制
weixin_40004659的博客
06-21 160
折线图canvas{border: 1px solid #000;}var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d');/*画布的宽高*/var w=canvas.width,h=canvas.height;/* 起始点距离边上的位置*/var padding=20;ctx.moveTo(padd...
小程序－Canvas绘制折线图
沙沙罗曼的专栏
02-27 3993
小程序－Canvas绘制折线图 自己在一个小程序项目中，希望通过绘制折线图展示不同时间的数值变化趋势，搜索了一番后没找到特别好的第三方库，故打算自己实现一个简单的绘制折线图方法，本文记录自己如何在小程序中通过canvas绘制折线图。 目标 最终目标是达到官方小程序数据助手中折线图的效果： 除了UI目标外，还要便于在小程序其他地方使用或者在其他小程序中使用，所以API要有适当的通用性。 实现 实现...
html语言制作折线图,HTML5 canvas绘制折线图(仿echarts)
weixin_34547883的博客
05-31 472
问题：Retina屏上字体线条模糊问题解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为 width="1800px" height="800px"，再用css {width: 900px;height: 400px;}压缩。canvas代码：echarts绘制var scale = 2;var canvas = document.getEl...
Android CANVAS绘制折线图
最新发布
06-09
要在 Android 上绘制折线图，可以使用 Canvas 和 Paint 类来实现。 首先，你需要创建一个自定义 View 组件，并在其 onDraw() 方法中实现绘图逻辑。在绘制折线图时，你需要先计算出每个数据点的坐标，然后使用 Path 类绘制连接这些点的线条。 下面是一个简单的示例代码，实现了一个基本的折线图绘制： ```java public class LineChartView extends View { private List<Float> mData = new ArrayList<>(); public LineChartView(Context context) { super(context); } public LineChartView(Context context, AttributeSet attrs) { super(context, attrs); } public LineChartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public void setData(List<Float> data) { mData = data; invalidate(); // 通知 View 进行重新绘制 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 设置画笔颜色和样式 Paint paint = new Paint(); paint.setColor(Color.BLUE); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(5); // 计算每个数据点的坐标 int width = getWidth(); int height = getHeight(); float xInterval = width / (mData.size() - 1); float yInterval = height / Collections.max(mData); Path path = new Path(); for (int i = 0; i < mData.size(); i++) { float x = i * xInterval; float y = height - mData.get(i) * yInterval; if (i == 0) { path.moveTo(x, y); } else { path.lineTo(x, y); } } // 绘制折线图 canvas.drawPath(path, paint); } } ``` 在 Activity 中，你可以通过调用 setData() 方法来设置折线图的数据，并将自定义 View 组件添加到布局中： ```java List<Float> data = new ArrayList<>(); data.add(10f); data.add(20f); data.add(50f); data.add(30f); data.add(40f); LineChartView lineChartView = new LineChartView(this); lineChartView.setData(data); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); linearLayout.addView(lineChartView, layoutParams); ``` 上述代码会在 LinearLayout 中添加一个折线图，其中数据为 [10, 20, 50, 30, 40]。你可以根据自己的需求来修改上述代码，实现更加复杂的折线图绘制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值