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

<!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>

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 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、付费专栏及课程。

余额充值