折线图(六)绘制真正可用的折线图

最新推荐文章于 2024-10-14 10:06:19 发布
最新推荐文章于 2024-10-14 10:06:19 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： android 文章标签： 折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YoYo_Newbie/article/details/50045705
版权

之前那几遍都是为了展示实现思路的，并不是真正的图实现。看过的人大致都知道接下来怎么做了，只不过是测量下折线图然后设置合理的大小。


这个下面本人实现的折线图是测试数据的图，随机点测试


package sam.android.utils.widget;

import java.util.List;

/**
 * 折线信息
 */
public class LineChartInfo
{
    /**
     *    折线名字
     */
    private String name;


    /**
     * 折线颜色
     */
    private int color;

    /**
     * 折线所有的折线点
     */
    private List<LineChartPoint> points;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }



    public List<LineChartPoint> getPoints() {
        return points;
    }

    public void setPoints(List<LineChartPoint> points) {
        this.points = points;
    }

}



/**
 * 折线点
 */
public class LineChartPoint {

    /**
     * y坐标轴的实际值
     */
    private float yValue;

    /**
     * x坐标轴的实际值
     */
    private float xValue;

    public float getxValue() {
        return xValue;
    }



    public void setxValue(float xValue) {
        this.xValue = xValue;
    }

    public float getyValue() {
        return yValue;
    }

    public void setyValue(float yValue) {
        this.yValue = yValue;
    }
}



package sam.android.utils.widget;

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

import java.util.ArrayList;
import java.util.List;


/**
 * 绘制折线图详情
 */
public class LineChartView extends View

{
    /*
    **
    * x 坐标最大值的文字长度
    */
    private int maxXChartValueLen = 0;

    /**
     * y 坐标最大值的文字长度
     */
    private int maxYChartValueLen = 0;


    /**
     * x轴每一单位多少px, 默认为2px/单位
     */
    private float xUnit = 16;


    /**
     * y轴每一单位多少px,默认为10px/单位
     */
    private float yUnit = 16;
    /**
     * x 轴最大单位值（非x位置值，其x位置值等于maxXValue*xUnit）， 默认为200个单位
     */
    private float maxXValue = 30;

    /**
     * y 轴最大单位值 （非y位置值，其y位置值等于maxYValue*yUnit）.默认为300个单位
     */
    private float maxYValue = 45;


    /**
     * 折线图距离左边或右边多少距离,默认为100px
     */
    private float chartViewMarginX = 100;


    /**
     * 折线图距离上班边或下边多少距离, ,默认为100px
     */
    private float chartViewMarginY = 100;


    /**
     * 折线图x坐标名字
     */
    private String xName = "x";


    /**
     * 折线图y坐标名字
     */
    private String yName = "y";


    /**
     * 坐标轴字体大小,默认32px
     */
    private float coordinateValueTextSize = 32;

    /**
     * 坐标轴文字到坐标轴距离
     */
    private float charToCoordinateAxisDistance = 15;


    /**
     * 箭头到最大单位值的距离
     */
    private float arrowToTextDistance = 100;

    /**
     * 表示设置的视图最小宽度
     */
    private float configWith = 480;

    /**
     * 表示设置的视图最小高度
     */
    private float configHeigh = 800;

    private int lineNamesHeight;

    /**
     * y轴最大的c长度
     */
    float realYAxisLen;


    /**
     * x轴最大的长度
     */
    float realXAxisLen;

    /**
     * x坐标轴到底部距离
     */
    float marginXAxisDistance;


    /**
     * y坐标轴到左边距离
     */
    float marginYAxisDistance;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        for(LineChartInfo lineChartInfo : lineChartInfos)
        {
            List<LineChartPoint> points = lineChartInfo.getPoints();
            for(LineChartPoint point : points)
            {
                maxXValue = Math.max(maxXValue, point.getxValue());
                maxYValue = Math.max(maxYValue, point.getyValue());
            }
        }

        if (MeasureSpec.AT_MOST == heightMode) {
            heightSize = heightSize > configHeigh ? heightSize : (int) configHeigh;
        } else if (MeasureSpec.UNSPECIFIED == heightMode) {
            heightSize = (int) configHeigh;
        }

        if (MeasureSpec.AT_MOST == widthMode) {
            widthSize = widthSize > configWith ? widthSize : (int) configWith;
        } else if (MeasureSpec.UNSPECIFIED == widthMode) {
            widthSize = (int) configWith;
        }


       //x轴名字 CharObj
        CharObj xNameCharObj = getCharObj(xName, coordinateValueTextSize);

        //y轴名字 CharObj
        CharObj yNameCharObj = getCharObj(yName, coordinateValueTextSize);

        // x 轴最大单位值 CharObj
        CharObj maxXValueCharObj = getCharObj(maxXValue + "", coordinateValueTextSize);

        // y 轴最大单位值 CharObj
        CharObj maxYValueCharObj = getCharObj(maxYValue + "", coordinateValueTextSize);

        //计算x坐标轴到底部距离 , 文字到坐标轴距离+ 文字高度+marginY+上方名字长度
        marginXAxisDistance = charToCoordinateAxisDistance + (xNameCharObj.heightLen > maxXValueCharObj.heightLen ? xNameCharObj.heightLen : maxXValueCharObj.heightLen) + chartViewMarginY + lineNamesHeight;

        //计算y坐标轴到左边距离 , 文字到坐标轴距离+ 文字宽度+marginX
        marginYAxisDistance = charToCoordinateAxisDistance + (yNameCharObj.withLen > maxYValueCharObj.withLen ? yNameCharObj.withLen : maxYValueCharObj.withLen) + chartViewMarginX;

        float maxYValuePX = maxYValue * yUnit; //最大y轴的单位值的实际位置


        //显示视图需要的高度
        int needHeight = (int) (configHeigh > maxYValuePX ? configHeigh : maxYValuePX ) + (int) (arrowToTextDistance+marginXAxisDistance * 2);

        float maxXValuePX = maxXValue * xUnit;//最大的x轴单位值的实际位置

        //显示视图需要的宽度
        int needWidth = (int) (configWith > maxXValuePX ? configWith : maxXValuePX ) + (int)(arrowToTextDistance+marginYAxisDistance * 2);

        heightSize = heightSize > needHeight ? heightSize : needHeight;
        widthSize = widthSize > needWidth ? widthSize : needWidth;
        realXAxisLen = widthSize - marginYAxisDistance * 2;
        realYAxisLen = heightSize - marginXAxisDistance * 2;
        super.setMeasuredDimension(widthSize, heightSize);
    }

    private float originY;
    private float originX;
    /**
     * 绘制坐标轴
     */
    private void drawAxis(Canvas canvas) {
        //计算原点y坐标
        originY = marginXAxisDistance + realYAxisLen;
        //计算原点x坐标相对手机的实际位置 = 文字到y坐标轴距离+ 文字的宽度
        originX = marginYAxisDistance;
        Paint paint = new Paint();
        paint.setStrokeWidth(5);
        paint.setTextSize(coordinateValueTextSize);
        canvas.drawLine(originX, originY, originX, marginXAxisDistance, paint);//画出y轴
        canvas.drawLine(originX, originY, originX + realXAxisLen, originY, paint);//画出x轴
        canvas.drawLine(originX, marginXAxisDistance, originX - 12, marginXAxisDistance + 12, paint);//画出y轴左半箭头
        canvas.drawLine(originX, marginXAxisDistance, originX + 12, marginXAxisDistance + 12, paint);//画出y轴右半箭头
        canvas.drawLine(originX + realXAxisLen, originY, originX + realXAxisLen - 12, originY + 12, paint);//画出x轴上半箭头
        canvas.drawLine(originX + realXAxisLen, originY, originX + realXAxisLen - 12, originY - 12, paint);//画出x轴下半箭头

        Rect rect1 = new Rect();
        paint.setTextSize(coordinateValueTextSize+12);
        paint.getTextBounds(xName, 0, xName.length(), rect1);
        canvas.drawText(xName, originX + realXAxisLen-rect1.width()/2, originY + charToCoordinateAxisDistance + rect1.height()*2, paint);

        paint.getTextBounds(yName, 0, yName.length(), rect1);

        canvas.drawText(yName, originX - charToCoordinateAxisDistance-rect1.width()*2, marginXAxisDistance+ rect1.height()/2, paint);

        Paint oPaint = new Paint();
        oPaint.setStrokeWidth(2);

        for (int i = (int) xUnit, j = 1; i <= realXAxisLen - arrowToTextDistance; i += xUnit, j++) {
            int o = 0; //标志物的高度
            if (0 == j % 10)
            {
                o = 20;
                String value = "" + j;
                Rect rect = new Rect();
                paint.setTextSize(coordinateValueTextSize);
                paint.getTextBounds(value, 0, value.length(), rect);
                canvas.drawText("" + j, originX + i-rect.width()/2, originY+charToCoordinateAxisDistance+rect.height(), paint);
            }
            else if (0 == j % 5)
            {
                String value = "" + j;
                Rect rect = new Rect();
                paint.setTextSize(coordinateValueTextSize);
                paint.getTextBounds(value, 0, value.length(), rect);
                canvas.drawText("" + j, originX + i-rect.width()/2, originY+charToCoordinateAxisDistance+rect.height(), paint);
                o = 15;
            }
            else
                o = 10;
            canvas.drawLine(originX + i, originY, originX + i, originY - o, oPaint);
        }

        for (int i = (int) yUnit, j = 1; i <= realYAxisLen - arrowToTextDistance; i += yUnit, j++) {
            int o = 0; //标志物的高度
            if (0 == j % 10)
            {
                String value = "" + j;
                Rect rect = new Rect();
                paint.setTextSize(coordinateValueTextSize);
                paint.getTextBounds(value, 0, value.length(), rect);
                canvas.drawText(value,originX-charToCoordinateAxisDistance-rect.width(), originY - i+rect.height()/2, paint);
                o = 20;
            }
            else if (0 == j % 5)
            {
                String value = "" + j;
                Rect rect = new Rect();
                paint.setTextSize(coordinateValueTextSize);
                paint.getTextBounds(value, 0, value.length(), rect);
                canvas.drawText(value,originX-charToCoordinateAxisDistance-rect.width(), originY - i+rect.height()/2 , paint);
                o = 15;
            }
            else
                o = 10;
            canvas.drawLine(originX, originY - i, originX + o, originY - i, oPaint);//画y标志物

        }

    }


    private List<LineChartInfo> lineChartInfos = new ArrayList<LineChartInfo>();

    public void addLineCharInfo(LineChartInfo info)
    {
        if(null != info)
            lineChartInfos.add(info);
    }

    //刷新界面
    public void update()
    {
        invalidate();
    }


    private void drawLineChartInfo(Canvas canvas)
    {
        if(lineChartInfos.isEmpty())
            return;

        for(LineChartInfo lineChartInfo : lineChartInfos)
        {
            List<LineChartPoint> points = lineChartInfo.getPoints();
            if(null == points || points.isEmpty())
                continue;
            Paint linePaint = new Paint();
            linePaint.setStrokeWidth(5);
            linePaint.setColor(lineChartInfo.getColor());
            Paint pointPaint = new Paint();
            pointPaint.setStrokeWidth(10);
            for(int i = 0; i < points.size()-1; i ++)
            {
                LineChartPoint point = points.get(i);
                LineChartPoint point2 = points.get(i+1);
                int x = (int) (originX+point.getxValue()*xUnit);
                int y = (int) (originY-point.getyValue()*yUnit);
                int x1 = (int) (originX+point2.getxValue()*xUnit);
                int y1 = (int) (originY-point2.getyValue()*yUnit);
                canvas.drawLine( x,y,x1,y1,linePaint);
                canvas.drawPoint(x1, y1, pointPaint);
            }
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawAxis(canvas);
        drawLineChartInfo(canvas);
    }

    /**
     * 获取文字会之后的CharObj
     *
     * @param value 文字
     * @param textSize 文字大小
     * @return CharObj
     */
    private CharObj getCharObj(String value, float textSize) {
        Paint paint = new Paint();
        paint.setTextSize(textSize);
        Rect rect = new Rect();
        paint.getTextBounds(value, 0, value.length(), rect);
        return new CharObj(rect.width(), rect.height());
    }

    /**
     * 记录绘制文字后，其文字高度，宽度。
     */
    class CharObj {
        float withLen;//测量文字的实际宽度
        float heightLen;//测量文字的实际高度

        CharObj(float withLen, float heightLen) {
            this.withLen = withLen;
            this.heightLen = heightLen;
        }
    }

    public LineChartView(Context context) {
        super(context);
    }

    public LineChartView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }


}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <sam.android.utils.widget.LineChartView
                android:id="@+id/lineChartView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </HorizontalScrollView>
    </ScrollView>
</LinearLayout>


如果折线点太大看会看不到，所以添加了滚动条



public class MainActivity extends AppCompatActivity {
    private LineChartView lineChartView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lineChartView = (LineChartView) findViewById(R.id.lineChartView);
        Random random = new Random();
        int[] colors ={Color.RED, Color.BLACK, Color.BLUE, Color.CYAN, Color.GREEN};
        for(int i =  0; i <  5; i ++)
        {
            LineChartInfo info = new LineChartInfo();
            info.setColor(colors[i]);
            int x =0;
            int y =0;
            List<LineChartPoint> pointList = new ArrayList<>();
            for(int j =0 ; j < 4; j ++)
            {
                if(0 != j)
                {
                    x += random.nextInt(10)+1;//随机设置实际值
                    y += random.nextInt(10)+1;
                }
                LineChartPoint point = new LineChartPoint();
                point.setxValue(x);
                point.setyValue(y);
                pointList.add(point);//添加折线点
            }
            info.setPoints(pointList);//将对应的折线点添加到对应的折线信息上
            lineChartView.addLineCharInfo(info);
        }
        lineChartView.update();//刷新界面
    }
}

待更新7






King 老师
关注
专栏目录
数据可视化—绘制简单的折线图
2401_83704218的博客
04-22 394
plt.show() # 打开matplotib查看器，并显示绘制的图形plt.scatter(2, 4, s=200) # 向scatter函数传递一对x,y坐标。
Selenium折线图自动化测试
C'mon的博客
02-15 1937
折线图是图表分析中很基本的一个图形，以echarts官方示例中的折线图为例：这是一个典型的折线图，跟折线图锚点交互会显示锚点关联的toast。我们怎么开展折线图的自动化测试呢？现在我们逐步讲解这些操作怎么如何实施，系好安全带，小编要发车了~
C++绘图类，可以绘制折线图，饼状图，条形图等
01-08
我一直想如果VC++能像MATLAB一样方便的绘图就好了，后来学习了混合编程，实现了这一想法，但这样的程序不能脱离MATLAB环境。现在我在网上找到了这个绘图类，非常好使，完美实现了MATLAB一样绘图功能，可绘制折线图、饼状图、条形图等。内部有类的源码和演示例程，我调试通过了，大家放心使用！感谢原作者！
C++Qt开发-QChart绘制折线图
NINE_world的博客
09-25 2968
步骤 1.创建图标 2.添加数据 头文件的私有类成员 QLineSeries *curSeries = new QLineSeries();//当前序列,存储坐标点，Pari类型的数据，便于一起插入点坐标 QValueAxis *curAxis;//当前坐标轴,设置坐标轴的一些信息。 queue< pair<int,int> > series_queue;//从队列获取数据 创建图标 1.提升QChartView 画图要有纸笔，这个QChartView就是充
C++随机数数据折线图Demo解析
weixin_35752233的博客
10-14 904
本文还有配套的精品资源，点击获取 简介：本小工具Demo演示了如何利用C++实现随机数的生成与数据折线图的绘制。通过使用 <random> 库生成随机数，设置动态参数，并将时间戳与随机数值存储在结构体或类中，最后使用第三方图形库绘制折线图。Demo还可能包含一个GUI界面，允许用户通过事件驱动编程设置参数并生成图形。该工具涵盖了C++编程中数据结构...
c++ 画折线图_哥大女硕士, 为啥画PPT这么厉害?
weixin_42620255的博客
12-08 412
职业规划/实习/内推/简历/面试/秋招/春招 ……任何个人规划&求职问题都可以来找UniCareer咨询：任何求职困扰，欢迎填表咨询​嘤嘤酱对面工位最近新入职了个一位哥大女硕士（没错，我司员工学历各个逆天…）昨天一篇业务PPT因为过于牛批震惊全司集美观与精准表达于一体，总结就俩字：专业！50页据说只花了1个小时……我不禁满头问号你们哥大回来的，是统一学过PPT从入门到高阶吗？01 哥大女...
动态生成折线图
weixin_30731287的博客
11-15 451
publicclassPrintTable:System.Web.UI.Page{privatevoidPage_Load(objectsender,System.EventArgse){if(Session["chuzulv"]!=null){//数据源...
C++ Qt开发：Charts折线图绘制详解
CSDN
12-23 9549
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍QCharts折线图的常用方法及灵活运用。折线图（Line Chart）是一种常用的数据可视化图表，用于展示随着时间、类别或其他有序变量而变化的趋势。折线图通过将数据点连接起来形成折线，直观地展示了变量之间的趋势和关系。在Qt中，可以使用图表库来创建折线图。
数据可视化入门篇----matplotlib库绘制简单的折线图
2301_82243883的博客
04-29 172
import matplotlib.pyplot as pltinput_values = [1, 2, 3, 4, 5]squares = [1, 4, 9, 16, 25]plt.plot(input_values, squares, linewidth=5)plt.title(‘Square Numbers’, fontsize=24)plt.xlabel(‘Value’, fontsize=14)plt.ylabel(‘Square of Value’, fontsize=14)plt.tick_p
Python数据分析(一) —— 绘制简单的折线图
m0_55613022的博客
06-12 7106
目录1、函数介绍plt.figure(figsize=(a, b), dpi=dpi)plt.plot(x，y)plt.xticks(ticks，label)plt.savefig()plt.show()plt.xlabel()plt.title()2、实战讲解总结进行数据分析，数据可视化需要运用python的第三方库matplotlib来进行数据可视化。首先介绍介绍几个函数：import matplotlib.pyplot as plt用设置显示窗口的大小形状figsize(a，b)：设置显示图框的大小，
android折线图动态,Android简易折线图的实现思路
weixin_32644565的博客
05-25 871
Android简易折线图的实现方案万事开头难，不说内容如何，关键在于我终于迈出这一步了！对于折线图来说，github已经有太多优秀的开源框架，如MPAndroidCharts，使用起来很方便，简单的调用其API方法即可。然在懂得运用的情况下我们更要理解折线图表实现的原理。最近写了一个简单的折线图，在此分享一下，接下来会逐渐完善与优化，主要就是模仿一些APP已经实现的简易功能。说了那么多的废话，开始...
qt qml c++ 折线图
03-28
qt qml c++ 折线图
vc++实现曲线显示界面，曲线类型有：饼图、直方图、散点图、折线图等
08-19
vc++实现各种曲线类型显示的界面，曲线类型有：饼图、直方图、散点图、折线图等
C++绘制曲线图 温度计图
04-15
C++ 曲线图 双缓冲绘图 区域图 柱形图 内存图片的保存 共同学习,资源共享 学习总结 取之于网络付之于网络
VC画折线图小程序说明
05-29
VC画折线图小程序说明读取原始数据，用于生成两种折线图即可。 单个测点生成单点显示折线图时，能够调整折线图上的点，并将调整后点对应的值保存回原文件。
VC++绘制曲线图趋势图
08-14
C++ 曲线图 双缓冲绘图 区域图 柱形图 内存图片的保存 共同学习,资源共享
qt qml c++ 画动态折线图
热门推荐
03-26 1万+
qt版本5.2 QtQuick2.0  显示：可横向拖动  源码地址 http://download.csdn.net/detail/zzjzmdx/7113719 源码包包含：main.cpp app.qml linechart.cpp linechart.h  main.c int main(int argc, char *argv[]) { Q
C++曲线图折线图Qt窗体绘图
alicema1111的博客
06-05 2545
C++曲线图折线图Qt窗体绘图 曲线图可自由切换在相同布局窗口中，Excel数据导入生成曲线图，根据需要可修改为直方图，饼图，散点图等。
Qt 5.9 C++开发指南18——Qt Charts概述、QChart绘制折线图
qq_42832272的博客
01-17 1833
Qt Charts概述 QChart绘制折线图——框架 缩小、放大、原始大小 pen属性 颜色设置 原始数据准备 创建图表 准备数据 更新界面 QChart的设置 设置chart的title，设置标题字体 设置chart图例的位置，图例是否可见，背景 设置字体，设置颜色 设置边距 动画效果、主题 曲线设置（QLineSeries序列的设置） 曲线选择 设置名称、序列是否可见、数据点是否可见、设置颜色 设置pen、设置透明度 设置标签，标签颜色、
android 折线图设置为曲线
最新发布
10-22
在Android中，如果你想要将折线图（LineChart）绘制为曲线而不是折线，实际上这不是折线图的基本样式，但是可以通过一些技巧实现。通常，Android的`MPAndroidChart`库提供的LineChart默认就是折线形式，如果你想让它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值