折线图实现

最新推荐文章于 2024-08-01 07:15:00 发布
最新推荐文章于 2024-08-01 07:15:00 发布
阅读量1k 收藏 5
点赞数 2
文章标签： 自定义控件 折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanxuedong/article/details/77749168
版权

      这样的图用来做统计最方便了，今天，我们又要摆脱第三方的约束，自己来实现了，是不是很开心，现在就来动手吧。

      本文内容需要读者具备一定的自定义view基础，否则看起来可能比较费力，不过懂的看门道，不懂的可以凑个热闹，能看懂可以自己去改不好的地方，不懂的也可以直接拿来用。
先给个效果图：
这里写图片描述这里写图片描述

      看起来还可以吧，废话不多说，开始我们的绘制。

     首先要确定我们要达成的效果，下面列出来

1：数据的获取
2：折线的绘制
3：X坐标文字的绘制
4：数字的绘制
5：数字的位置判断，防止与折线重合
6：随手指滑动的效果

这样思路清晰了，下面逐个击破

 1    数据的获取
    这恐怕是最简单的一步了，我在里面定义了一个方法，包含三个参数，使用的时候直接传进去，再刷新试图即可，给出方法

    //设置整个坐标上的一些文字和数字
    public void setData(String[] coordinate, String[] number, float extremum) {
        this.coordinate = coordinate;
        this.number = number;
        this.extremum = extremum;
    }

    可以看见传入了三个参数，一个是坐标数组，一个是数字数组，这里用字符数组代替的，再一个就是Y轴上最大值

 2    折线的绘制
    绘制折线肯定是要使用到path，那么就要把path拿来，然后添上路径即可，那么主要就是路径坐标的问题了，X坐标我用的文字宽度加上文字和文字之间距离形成最后的坐标，然后遍历数组就能获得一个个X坐标，Y坐标我添加了一个功能，那就是能设置绘制图的上边距和下边距，其实X坐标我也设置了左边距，具体的使用大家可以去里面更改数值感受一下，如果上边距加上下编剧正好等于控件的高度的话，那就整个图就是一个直线，你懂的。
给出绘制路径代码：

            float deviationY = (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM;   //这里式子没有简化，是为了方便你们清楚这是怎么一个过程
            float deviationX = movedistance + OFFSETX + txtrect.width() * i + txtpading * i;  //这里式子没有简化，是为了方便你们清楚这是怎么一个过程
            //画出折线图的路径
            path.lineTo(deviationX, deviationY);
            canvas.drawPath(path, linepaint);      //绘制折线

    解释一下，这里的movedistance就是随手指滑动会产生的位移，OFFSETX则是X轴左边距，OFFSETYTOP是Y轴上边距，OFFSETYBOTTOM是Y轴下边距。

 3    X坐标文字的绘制
    文字的绘制比较简单了，主要就是坐标的把握，Y轴没难度，都用问题的高度即可，X轴呢，其实就是刚才绘制折线的X坐标再减去文字宽度的一半即可，给出代码参考：

canvas.drawText(coordinate[i] + "", deviationX - txtrect.width() / 2, height - txtrect.height() / 2, extremumpaint);     //绘制X轴上的坐标

 4    数字的绘制
    数字的绘制相对于文字的绘制就是多了一个Y轴上的变换，当然了，X轴这里要减去的是数字的宽度一半，而不是文字了，高度我们其实用之前折线的高度减去上我们数字的高度的一半即可，给出代码：

canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY - numberrect.height() / 2, txtpaint);   //绘制数字

 5    数字的位置判断，防止与折线重合
    这个问题呢我们可以从折线的走势判断解决，那么当前的数字所在的折线坐标会有以下情况：
    1: 中间最高
    2: 左边最高，右边最低
    3: 左边最低，右边最高
    4: 中间最低
就这四种情况，我们可以从Y轴进行判断，判断我提取了成了一个方法，给出代码：

    /*这个函数的作用是判断当前数字坐标的y轴和其左右两边的数字坐标的y进行比较，从而判断数字显示的位置，避免折线和数字重复在一起的情况
     */
    public int judgmentposition(int i) {
        int status = 1;
        if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) >
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM <
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 1;
        } else if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) <
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM <
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 2;
        } else if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) >
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM >
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 3;
        } else {
            status = 4;
        }
        Log.d("statusnumbers", status + "");
        return status;
    }

使用时的代码：

            //下面的绘制要保证文字在合适的位置，想了解的可参考我另一个博客：http://blog.csdn.net/wanxuedong/article/details/69396732
            if (i > 0 && i < number.length - 1) {
                switch (judgmentposition(i)) {
                    case 1:    //中间最高
                        canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY - numberrect.height(), txtpaint);   //绘制数字
                        break;
                    case 2:    //左边最高，右边最低
                        canvas.drawText(number[i] + "", deviationX, deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
                        break;
                    case 3:    //左边最低，右边最高
                        canvas.drawText(number[i] + "", deviationX - numberrect.width(), deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
                        break;
                    case 4:    //中间最低
                        canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY + numberrect.height() * 2, txtpaint);   //绘制数字
                        break;
                }
            } else {
                canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
            }

 6    随手指滑动的效果
    和手势有关的就不得不使用onTouchEvent方法了，给出代码：

    //这里面我们实现了让该控件可以随手指挥动而滚动，但是没写滚动条(因为觉得有滚动条也不好看)
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                positionx = event.getRawX();
                break;
            case MotionEvent.ACTION_MOVE:
                //如果是往右滑动，那么左侧距离就要判断不能过大
                if (event.getRawX() - positionx > 0) {
                    if (!(movedistance > leftdistance)) {
                        movedistance += event.getRawX() - positionx;
                        positionx = event.getRawX();
                        invalidate();
                    }
                } else {    //如果是往右滑动，那么左侧距离也要判断不能过大
                    if (!(movedistance < -rightdistance)) {
                        movedistance += event.getRawX() - positionx;
                        positionx = event.getRawX();
                        invalidate();
                    }
                }
                positionx = event.getRawX();
                break;
            case MotionEvent.ACTION_UP:
                break;

        }
        return true;
    }

    有两个值需要解释一下，leftdistance和rightdistance，这是我们可以再开始时设置的左右滑动的最大距离，具体可以自己进去设置。

    好了，总的效果也就这样完成了，解剖后是不是看起来又有点简单了，学习就是这样，能者不惧，你就是能者。
下面给出整个代码（可以直接粘贴复制进行使用）：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by wanxuedong on 2017/08/30.
 * 联系QQ:2381144912
 */

public class LineChart extends View {

    //这三个值是我们传进来的，绘图的数据从这里来
    private String[] coordinate; //X坐标上的标记
    private String[] number;      //折线图上的一个个数字，传值的时候只能传数字，别瞎传哈
    private float extremum;     //Y坐标的最大值


//    private int width;           //控件的宽度
    private int height;         //控件的高度
    private Path path;          //折线的路径
    private Paint linepaint;    //折线的画笔
    private Paint rectpaint;    //方块的画笔
    private Paint extremumpaint;  //坐标的画笔
    private Paint txtpaint;      //数值文字的画笔
    //    private Rect rect;          //方块的模型
    private Rect txtrect;     //利用rect获取X坐标上文字的宽度，好精确的放置文字位置
    private Rect numberrect;   //利用rect获取数字的宽度，好精确的放置文字位置

    //下面两个属性用来操作手势有关的
    private float positionx = 0;     //手指移动的时候，记录X坐标的作用
    private float movedistance;     //手指每次移动的位移，整个图像会根据手势进行移动


    /*
    * 上面的数据基本上不需要动，下面的属性我们可以自行更改
    * */

    //    private int RECTWIDTH = 5;       //小方块的宽度
    private int RECTHEIGHT = 6;     //小方块的高度和圆的半径
    private int OFFSETYTOP = 100;    //Y轴方向顶端留下的长度
    private int OFFSETYBOTTOM = 100;    //Y轴方向底端留下的长度
    private int OFFSETX = 100;    //x轴方向左端留下的长度
    private int XTXTSIZE = 24;   //X轴文字大小
    private int NUMBERSIZE = 18; //数字文字大小
    private int LINEWIDTH = 3;     //折线粗度
    private int txtpading = 80;    //X坐标轴上每个文字之间的间隔大小，这个决定了你的控件有多宽

    //下面两个属性需要根据实际情况自己改动，如果有好的方案，望请告知
    private int leftdistance = 50;     //X轴手势往右滑动的最大距离,这个数字会和OFFSETX加起来，总的数值才是左侧看起来的距离
    private int rightdistance = 500; //X轴手势往左滑动的最大距离


    public LineChart(Context context) {
        super(context);
        path = new Path();
        initpaint();
    }

    public LineChart(Context context, AttributeSet attrs) {
        super(context, attrs);
        path = new Path();
        initpaint();
    }

    //测量获取控件宽高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//        width = getMeasuredWidth();
        height = getMeasuredHeight();
    }

    //这里面开始绘制文字，数字，和折线
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //定位折线的起始位置，也就是第一个数字坐标点
        path.moveTo(OFFSETX + movedistance, (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[0]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM);

        for (int i = 0; i < number.length; i++) {
//            rect = new Rect();
            txtrect = new Rect();
            numberrect = new Rect();
            extremumpaint.getTextBounds(coordinate[i], 0, coordinate[i].length(), txtrect);
            txtpaint.getTextBounds(number[i], 0, number[i].length(), numberrect);
            float deviationY = (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM;   //这里式子没有简化，是为了方便你们清楚这是怎么一个过程
            float deviationX = movedistance + OFFSETX + txtrect.width() * i + txtpading * i;  //这里式子没有简化，是为了方便你们清楚这是怎么一个过程
            //画出折线图的路径
            path.lineTo(deviationX, deviationY);
            canvas.drawPath(path, linepaint);      //绘制折线
            //设置方块的位置和宽高属性
//            rect.set(width / number.length * i - RECTWIDTH / 2 + OFFSETX, (int) (deviationY - RECTHEIGHT / 2), width / number.length * i + RECTWIDTH / 2 + OFFSETX, (int) (deviationY + RECTHEIGHT / 2));
//            canvas.drawRect(rect, rectpaint);      //绘制小方块
//            下面是绘制小圆球，上面是绘制小方块，有需要的可以恢复上面的小方块(不过坐标自己去设置了，懒的再去看去改了)
            canvas.drawCircle(deviationX, deviationY, RECTHEIGHT, rectpaint);
            //下面的绘制要保证文字在合适的位置，想了解的可参考我另一个博客：http://blog.csdn.net/wanxuedong/article/details/69396732
            if (i > 0 && i < number.length - 1) {
                switch (judgmentposition(i)) {
                    case 1:    //中间最高
                        canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY - numberrect.height(), txtpaint);   //绘制数字
                        break;
                    case 2:    //左边最高，右边最低
                        canvas.drawText(number[i] + "", deviationX, deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
                        break;
                    case 3:    //左边最低，右边最高
                        canvas.drawText(number[i] + "", deviationX - numberrect.width(), deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
                        break;
                    case 4:    //中间最低
                        canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY + numberrect.height() * 2, txtpaint);   //绘制数字
                        break;
                }
            } else {
                canvas.drawText(number[i] + "", deviationX - numberrect.width() / 2, deviationY - numberrect.height() / 2, txtpaint);   //绘制数字
            }
            //上面为了数字位置进行了判断设置，但是不包括第一个数字和最后一个数字，有需要的可以自行添加
            canvas.drawText(coordinate[i] + "", deviationX - txtrect.width() / 2, height - txtrect.height() / 2, extremumpaint);     //绘制X轴上的坐标
        }
        path.reset();   //每次重绘的时候需要把path恢复成空的路径，否则，所有路径会叠加在一起，那到时就热闹了
    }

    //这里面我们实现了让该控件可以随手指挥动而滚动，但是没写滚动条(因为觉得有滚动条也不好看)
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                positionx = event.getRawX();
                break;
            case MotionEvent.ACTION_MOVE:
                //如果是往右滑动，那么左侧距离就要判断不能过大
                if (event.getRawX() - positionx > 0) {
                    if (!(movedistance > leftdistance)) {
                        movedistance += event.getRawX() - positionx;
                        positionx = event.getRawX();
                        invalidate();
                    }
                } else {    //如果是往右滑动，那么左侧距离也要判断不能过大
                    if (!(movedistance < -rightdistance)) {
                        movedistance += event.getRawX() - positionx;
                        positionx = event.getRawX();
                        invalidate();
                    }
                }
                positionx = event.getRawX();
                break;
            case MotionEvent.ACTION_UP:
                break;

        }
        return true;
    }

    //初始化画笔，读者看的时候可略过
    public void initpaint() {

        linepaint = new Paint();
        rectpaint = new Paint();
        extremumpaint = new Paint();
        txtpaint = new Paint();

        //折线的一些属性
        linepaint.setColor(Color.argb(255, 245, 133, 61));     //设置颜色
        linepaint.setStyle(Paint.Style.STROKE);    //设置空心填充
        linepaint.setAntiAlias(true);  //设置抗锯齿
        linepaint.setStrokeWidth(LINEWIDTH);    //设置粗度

        //方块的一些属性
        rectpaint.setColor(Color.argb(255, 245, 133, 61));

        //X坐标轴上文字的一些属性
        extremumpaint.setColor(Color.argb(255, 51, 51, 51));
        extremumpaint.setTextSize(XTXTSIZE);    //设置坐标文字大小
        extremumpaint.setAntiAlias(true);

        //数字的一些属性
        txtpaint.setColor(Color.argb(255, 145, 145, 145));
        txtpaint.setTextSize(NUMBERSIZE);    //设置数字大小
        txtpaint.setAntiAlias(true);
    }

    /*这个函数的作用是判断当前数字坐标的y轴和其左右两边的数字坐标的y进行比较，从而判断数字显示的位置，避免折线和数字重复在一起的情况
     */
    public int judgmentposition(int i) {
        int status = 1;
        if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) >
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM <
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 1;
        } else if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) <
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM <
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 2;
        } else if (((height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i - 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) >
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM &&
                (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM >
                        (height - OFFSETYTOP) - (height - OFFSETYTOP - OFFSETYBOTTOM) * (Float.parseFloat(number[i + 1]) / extremum) + OFFSETYTOP - OFFSETYBOTTOM) {
            status = 3;
        } else {
            status = 4;
        }
        Log.d("statusnumbers", status + "");
        return status;
    }

    //设置整个坐标上的一些文字和数字
    public void setData(String[] coordinate, String[] number, float extremum) {
        this.coordinate = coordinate;
        this.number = number;
        this.extremum = extremum;
    }

}

最后还是给出demo，走你：http://download.csdn.net/download/wanxuedong/9958951

SmFour
关注
专栏目录
图表之折线图
Mr_lu_的博客
12-25 1116
最近项目新增一个图表数据查看的。 效果图如下 各个折线点x,y点坐标很好计算。不好画的是如何让这个折线不穿过这个空心圆 如果折线穿过空心圆，则变成下面这个样子 折线点画圆没错，但是直接连接折线点肯定和圆有相交，但是这又是个空心圆，如果是实心圆，则先画线，再画圆就可以直接覆盖在上面。but 。。产品就是这么虐心，搞个空心圆。。so。实现起来难度就大那么一丢丢了。 既然不能直接连接圆中心，那就是需...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
html，css实现各式各样的炫酷图表，折线图，柱形图（2D、3D）饼图.....
01-29
该文件涵盖了各式各样的图文报表，里面的各种图表通过下拉框选择切换，非常强大，用于各行业，cms、数学统计、数据处理...界面简洁清晰，代码通俗易用。。。
实现折线图
qq_33994844的博客
12-24 566
手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍 字数519 阅读452 评论0 喜欢47 研究了一下achartenginee图表框架，一不美观，二 achartenginee的可定制性实在不敢恭维，做出来的图表根本不能满足需求 再试了一次网传最好用的MPchart和hellochart同一年出来的，但是要比hellochaet早
Chapter 22 数据可视化——折线图
最新发布
2302_80253507的博客
08-01 2268
在大数据时代，数据可视化成为了分析和展示数据的重要手段。Pyecharts 是一个基于 Python 的强大数据可视化库，能够快速生成易于分享和交互的可视化图表。本章详细讲解了 Pyecharts 的官网资源、安装流程、全局配置项以及如何创建折线图。
【Python】可视化案例一——折线图的开发
xzt12138的博客
12-30 1363
Python语言在处理大数据方面具有很强悍的能力。面对海量的数据，我们根本无法通过去阅读一条一条的数据来进行分析，很多时候我们需要将海量的数据处理成我们肉眼可以进行分析的形式。对于肉眼来说，通过图表的形式来进行数据的分析往往是效率比较高的。因此，利用Python处理大数据的能力与将数据进行可视化相结合无疑是相得益彰的。
关于如何使用原生HTML + JS + CSS绘制简单折线柱状图
weixin_33940102的博客
11-29 739
前言 CSS确实很重要，且有点奇技淫巧，看起来规则十分简单，但是创意更重要，如何用css构造出自己想要的效果，写的代码好看优雅十分重要。 在看了不借助Echarts等图形框架原生JS快速实现折线图效果并自己重新实现了以后，实在是感慨CSS的强大之处，并作出记录。 正文 先上结果图： 总结下自己觉得关于几点比较难以理解的点： 1. 如何实现以下效果： 以上是由一个div配合其after伪元素完成...
Android 简单折线图实现 MyLineChart.zip
09-27
这个"Android简单折线图实现 MyLineChart.zip"文件提供了一个易懂的示例，帮助开发者了解如何在Android应用中创建折线图。我们将详细探讨这个过程中的关键知识点。 首先，Android中实现折线图可以借助第三方库，如...
折线图
weixin_44543108的博客
06-09 201
统计了数据，为了更好的做出对比，就有了各种各样的图标，现在来做做折线图 用echarts插件 设置宽高位置 <div class="col-9 ml-3" id="tabContent"> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main1" style="width:400px;height:300px;float:le...
html5+css3 统计图 条形 折线
07-17
使用 html5 和 css3 实现的数据统计图，包含条形图和折线图
44种动态/静态统计图（折线图）大集合基于html5 CSS3
12-03
44种统计图，什么网站统计，数据统计，动态折线图，静态图，饼状图，柱状图应有尽有，没有你想不到，只有你没看过的，基于html5，CSS3等技术，下载一次，受用一辈子！
动态折线图
08-28
动态折线图
折线图，曲线图
07-30
安卓自定义View之绘制折线图，曲线图
折线图的实现
11-05
一个简单的折线图，可扩展性十分强。希望大家喜欢
自己撸一个折线图
薛凯的博客
12-09 770
recyclerview实现一个折线图
如何用计算机做出折线图,Numbers怎么做折线图 Numbers制作折线图教程
weixin_42347634的博客
06-19 2341
Numbers中有丰富的图表可供用户们选择，有的人想要了解下 Numbers怎么做折线图 。Numbers如何做折线图？小编带来了Numbers制作折线图教程，看完就知道Numbers怎么画折线图啦~Numbers制作折线图教程：点按工具栏中的 “图表”按钮，然后点按“二维”、“三维”或“交互式”。点按左箭头和右箭头以查看更多样式，找到折线图。【注】堆叠条形图、柱形图和面积图显示两个或更多个堆叠在...
折线图绘制
qq_39112101的博客
12-16 676
（1）用命令pip安装matplotlib import pandas as pd import matplotlib.pyplot  as plt   unrate = pd.read_csv(r"E:\PyCharm\UNRATE.csv") unrate["DATE"]  =  pd.to_datetime(unrate["DATE"])                      ...
qt 个性化折线图实现
01-22
个性化折线图实现是指根据用户的需求，对折线图进行定制化的设计和实现。 要实现个性化折线图，可以借助Qt中的QCustomPlot库来创建和绘制折线图。QCustomPlot是一个功能强大的第三方插件，可以轻松地实现各种图表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值