Android 曲线图绘制

66 篇文章 0 订阅
30 篇文章 0 订阅

最近项目里要做一个简单的曲线图来标识数据,开始以为很简单,android已经有那么多的开源图表库了,什么achartenginee,hellochart,mpandroidchart等等,下载Demo一找,都强大到有点不适合我这个小小的展示功能了,直是无语了。于是只能自已去画了,继承自View去重绘。
 下面先看一下效果图:

思路:根据点的数量将Canvas等分,等分后先绘制图表的所有横轴和纵轴。再将数据转化为点坐标,绘制到屏幕上,最后将相邻两点连成线即可。
 源码如下:
复制代码
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

/**********************************************************

  • @文件名称:LineGraphicView.java

  • @文件作者:rzq

  • @创建时间:2015年5月27日 下午3:05:19

  • @文件描述:自定义简单曲线图

  • @修改历史:2015年5月27日创建初始版本
    ********************************************************/
    class LineGraphicView extends View
    {
    /

    • 公共部分
      */
      private static final int CIRCLE_SIZE = 10;

    private static enum Linestyle
    {
    Line, Curve
    }

    private Context mContext;
    private Paint mPaint;
    private Resources res;
    private DisplayMetrics dm;

    /**

    • data
      */
      private Linestyle mStyle = Linestyle.Curve;

    private int canvasHeight;
    private int canvasWidth;
    private int bheight = 0;
    private int blwidh;
    private boolean isMeasure = true;
    /**

    • Y轴最大值
      /
      private int maxValue;
      /
      *
    • Y轴间距值
      */
      private int averageValue;
      private int marginTop = 20;
      private int marginBottom = 40;

    /**

    • 曲线上总点数
      /
      private Point[] mPoints;
      /
      *
    • 纵坐标值
      /
      private ArrayList yRawData;
      /
      *
    • 横坐标值
      */
      private ArrayList xRawDatas;
      private ArrayList xList = new ArrayList();// 记录每个x的值
      private int spacingHeight;

    public LineGraphicView(Context context)
    {
    this(context, null);
    }

    public LineGraphicView(Context context, AttributeSet attrs)
    {
    super(context, attrs);
    this.mContext = context;
    initView();
    }

    private void initView()
    {
    this.res = mContext.getResources();
    this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    dm = new DisplayMetrics();
    WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
    wm.getDefaultDisplay().getMetrics(dm);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
    if (isMeasure)
    {
    this.canvasHeight = getHeight();
    this.canvasWidth = getWidth();
    if (bheight == 0)
    bheight = (int) (canvasHeight - marginBottom);
    blwidh = dip2px(30);
    isMeasure = false;
    }
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
    mPaint.setColor(res.getColor(R.color.color_f2f2f2));

     drawAllXLine(canvas);
     // 画直线(纵向)
     drawAllYLine(canvas);
     // 点的操作设置
     mPoints = getPoints();
    
     mPaint.setColor(res.getColor(R.color.color_ff4631));
     mPaint.setStrokeWidth(dip2px(2.5f));
     mPaint.setStyle(Style.STROKE);
     if (mStyle == Linestyle.Curve)
     {
         drawScrollLine(canvas);
     }
     else
     {
         drawLine(canvas);
     }
    
     mPaint.setStyle(Style.FILL);
     for (int i = 0; i < mPoints.length; i++)
     {
         canvas.drawCircle(mPoints[i].x, mPoints[i].y, CIRCLE_SIZE / 2, mPaint);
     }
    

    }

    /**

    • 画所有横向表格,包括X轴
      */
      private void drawAllXLine(Canvas canvas)
      {
      for (int i = 0; i < spacingHeight + 1; i++)
      {
      canvas.drawLine(blwidh, bheight - (bheight / spacingHeight) * i + marginTop, (canvasWidth - blwidh),
      bheight - (bheight / spacingHeight) * i + marginTop, mPaint);// Y坐标
      drawText(String.valueOf(averageValue * i), blwidh / 2, bheight - (bheight / spacingHeight) * i + marginTop,
      canvas);
      }
      }

    /**

    • 画所有纵向表格,包括Y轴
      */
      private void drawAllYLine(Canvas canvas)
      {
      for (int i = 0; i < yRawData.size(); i++)
      {
      xList.add(blwidh + (canvasWidth - blwidh) / yRawData.size() * i);
      canvas.drawLine(blwidh + (canvasWidth - blwidh) / yRawData.size() * i, marginTop, blwidh
      + (canvasWidth - blwidh) / yRawData.size() * i, bheight + marginTop, mPaint);
      drawText(xRawDatas.get(i), blwidh + (canvasWidth - blwidh) / yRawData.size() * i, bheight + dip2px(26),
      canvas);// X坐标
      }
      }

    private void drawScrollLine(Canvas canvas)
    {
    Point startp = new Point();
    Point endp = new Point();
    for (int i = 0; i < mPoints.length - 1; i++)
    {
    startp = mPoints[i];
    endp = mPoints[i + 1];
    int wt = (startp.x + endp.x) / 2;
    Point p3 = new Point();
    Point p4 = new Point();
    p3.y = startp.y;
    p3.x = wt;
    p4.y = endp.y;
    p4.x = wt;

         Path path = new Path();
         path.moveTo(startp.x, startp.y);
         path.cubicTo(p3.x, p3.y, p4.x, p4.y, endp.x, endp.y);
         canvas.drawPath(path, mPaint);
     }
    

    }

    private void drawLine(Canvas canvas)
    {
    Point startp = new Point();
    Point endp = new Point();
    for (int i = 0; i < mPoints.length - 1; i++)
    {
    startp = mPoints[i];
    endp = mPoints[i + 1];
    canvas.drawLine(startp.x, startp.y, endp.x, endp.y, mPaint);
    }
    }

    private void drawText(String text, int x, int y, Canvas canvas)
    {
    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
    p.setTextSize(dip2px(12));
    p.setColor(res.getColor(R.color.color_999999));
    p.setTextAlign(Paint.Align.LEFT);
    canvas.drawText(text, x, y, p);
    }

    private Point[] getPoints()
    {
    Point[] points = new Point[yRawData.size()];
    for (int i = 0; i < yRawData.size(); i++)
    {
    int ph = bheight - (int) (bheight * (yRawData.get(i) / maxValue));

         points[i] = new Point(xList.get(i), ph + marginTop);
     }
     return points;
    

    }

    public void setData(ArrayList yRawData, ArrayList xRawData, int maxValue, int averageValue)
    {
    this.maxValue = maxValue;
    this.averageValue = averageValue;
    this.mPoints = new Point[yRawData.size()];
    this.xRawDatas = xRawData;
    this.yRawData = yRawData;
    this.spacingHeight = maxValue / averageValue;
    }

    public void setTotalvalue(int maxValue)
    {
    this.maxValue = maxValue;
    }

    public void setPjvalue(int averageValue)
    {
    this.averageValue = averageValue;
    }

    public void setMargint(int marginTop)
    {
    this.marginTop = marginTop;
    }

    public void setMarginb(int marginBottom)
    {
    this.marginBottom = marginBottom;
    }

    public void setMstyle(Linestyle mStyle)
    {
    this.mStyle = mStyle;
    }

    public void setBheight(int bheight)
    {
    this.bheight = bheight;
    }

    /**

    • 根据手机的分辨率从 dp 的单位 转成为 px(像素)
      */
      private int dip2px(float dpValue)
      {
      return (int) (dpValue * dm.density + 0.5f);
      }

}

  使用:

package com.example;
import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity
{
LineGraphicView tu;
ArrayList yList;

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    tu = (LineGraphicView) findViewById(R.id.line_graphic);

    yList = new ArrayList<Double>();
    yList.add((double) 2.103);
    yList.add(4.05);
    yList.add(6.60);
    yList.add(3.08);
    yList.add(4.32);
    yList.add(2.0);
    yList.add(5.0);

    ArrayList<String> xRawDatas = new ArrayList<String>();
    xRawDatas.add("05-19");
    xRawDatas.add("05-20");
    xRawDatas.add("05-21");
    xRawDatas.add("05-22");
    xRawDatas.add("05-23");
    xRawDatas.add("05-24");
    xRawDatas.add("05-25");
    xRawDatas.add("05-26");
    tu.setData(yList, xRawDatas, 8, 2);
}

}
复制代码

demo下载http://note.youdao.com/yws/public/redirect/share?id=fd4b3bc312e39a915fe865c55cfb561a&type=false
Boxing.zip

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Android Studio中,你可以使用`MPAndroidChart`库来轻松地绘制曲线图。这是一个非常流行的开源库,用于创建高性能图表。以下是使用`MPAndroidChart`绘制曲线图的基本步骤: 1. **添加依赖**: 首先,你需要在你的项目中添加`MPAndroidChart`的依赖。如果你使用的是Gradle,可以在`build.gradle`文件的`dependencies`块中添加如下代码: ```groovy implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' // 或者最新的版本号 ``` 2. **初始化图表**: 在你的Activity或Fragment中,实例化LineChart对象,并设置其宽度、高度和背景等属性: ```java LineChart chart = findViewById(R.id.chart); chart.getDescription().setText(""); chart.setTouchEnabled(true); chart.setPinchZoom(false); chart.getXAxis().setEnabled(false); chart.getLegend().setEnabled(false); ``` 3. **数据准备**: 准备你要绘制的数据,通常是一个包含x轴值(时间戳)和y轴值(数据点)的`XYDataSet`对象。 4. **创建数据集**: ```java List<Entry> entries = new ArrayList<>(); for (float value : yourData) { entries.add(new Entry(value, index)); // index是对应x轴位置的索引 } LineDataSet dataSet = new LineDataSet(entries, "Data Label"); dataSet.setColor(Color.BLUE); dataSet.setDrawValues(false); // 不显示数据点 ``` 5. **设置数据集**: 将数据集添加到图表中,并设置其样式和动画: ```java LineData data = new LineData(dataSet); chart.setData(data); chart.invalidate(); // 刷新图表 ``` 6. **自定义样式**: 可以根据需要自定义图表的颜色、样式、轴标签等。查看`MPAndroidChart`的官方文档以获取更多定制选项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值