android 自定义折线图

最近在做一个串口连接 使用折线图显示出串口那边返回的 数据 

话不多说 首先将这个库拷贝到libs中 点击下载

然后 下面就是代码 直接拷贝 然后作为普通的view来使用就可以

package com.lk.serialportcosmeticinstrument.view;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

import com.lk.serialportcosmeticinstrument.R;

import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;

import java.util.ArrayList;

/**
 * @author JsonBob
 * @date 9:10 2018/6/28 0028
 */
public class SineLineView extends LinearLayout  {

    private View sineView;
    private Context mContext;
    private LinearLayout mLayout;
    private Handler handler;
    private XYSeries series;
    private XYMultipleSeriesDataset mDataset;
    private GraphicalView chart;

    private String title = "";
    private XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
    private XYSeriesRenderer r = new XYSeriesRenderer();

    private int MAX_POINT_Y = 100; //Y轴 未移动最大坐标
    private int MAX_POINT_X = 25; //X轴 未移动最大坐标
    private int flagBreBt = 0; // 传递过来的数据
    private final int POINT_GENERATE_PERIOD = 1000; //单位是ms
    int i = 0; // 点的移动
    int addX = -1 ;

    int[] xv = new int[MAX_POINT_X];
    int[] yv = new int[MAX_POINT_Y];
    private static ArrayList<Integer> drawPack = new ArrayList<Integer>(); // 需要绘制的数据集
    private static boolean BOO = false;

    public SineLineView(Context context) {
        super(context);
        init(null,0);
    }

    public SineLineView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs,0);
    }

    public SineLineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs,defStyleAttr);
    }
    
    private void init(AttributeSet attrs, int defStyle){
        mContext = getContext();
        handler =new Handler();
        initView();
        initCardiograph();
    }

    private void initView(){
        sineView = LayoutInflater.from(mContext).inflate(R.layout.other_sine_line_view,this,true);
        mLayout = (LinearLayout)sineView.findViewById(R.id.lin_sine);
    }

    //初始化
    private void initCardiograph() {
        series = new XYSeries(title);// 这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线
        mDataset = new XYMultipleSeriesDataset(); // 创建数据集的实例 用来创建图表
        mDataset.addSeries(series); // 将点集加入到实例中
        int clSine = getResources().getColor(R.color.cl_sine);
        int clSineBg = getResources().getColor(R.color.cl_sine_bg);
        int cl_RenderBg = getResources().getColor(R.color.bg_currency);
        PointStyle sineStyle = PointStyle.CIRCLE;//圆点
        buildRender(clSine, sineStyle, true); // 设置线本身的style
        setChartSettings(renderer, MAX_POINT_X, MAX_POINT_Y, clSine, clSineBg, cl_RenderBg); // 颜色: 线 表 背景边框
        chart = ChartFactory.getLineChartView(mContext, mDataset, renderer);// 生成图表
        chart.setBackgroundColor(clSineBg);
        mLayout.removeAllViews(); //移除该控件所有view
        mLayout.addView(chart);//添加图表

    }


    //线属性
    private void buildRender(int color, PointStyle style, boolean fill) {
        // 设置图表中曲线本身的样式，包括颜色、点的大小以及线的粗细等
        r.setColor(color);
        r.setPointStyle(style);
        r.setFillPoints(true);
        r.setLineWidth(1); //粗细
//        renderer.setXTitle(XTitle); //x轴 标题
//        renderer.setYTitle(YTitle); //y轴 标题
        renderer.addSeriesRenderer(r);
    }


    //图表属性
    private void setChartSettings(XYMultipleSeriesRenderer renderer, double xMax, double yMax, int axesColor, int labelsColor, int bgColor) {


        // 有关对图表的渲染可参看api文档
        renderer.setBackgroundColor(bgColor);
//        renderer.setChartTitle(title);//图例标题
        renderer.setChartTitleTextSize(20);
        renderer.setLabelsTextSize(20);// 设置坐标轴标签文字的大小
        renderer.setXAxisMin(0); //X轴 原点值
        renderer.setXAxisMax(xMax); //X轴 未移动之前最大值
        renderer.setYAxisMin(0); //Y轴 原点值
        renderer.setYAxisMax(yMax); //Y轴 为移动之前最大值
        renderer.setClickEnabled(false); //设置不能点击
        renderer.setPanEnabled(false); //设置不能拖动
        renderer.setZoomEnabled(false, false); //设置不能放大 缩小
        renderer.setYAxisAlign(Paint.Align.LEFT, 0);//用来调整Y轴放置的位置，表示将第一条Y轴放在右侧
        renderer.setAxesColor(axesColor);
        renderer.setLabelsColor(labelsColor);
        renderer.setShowGrid(true);
        renderer.setGridColor(Color.GRAY);
        renderer.setXLabels(5);// x轴平分5份
        renderer.setYLabels(2); // y轴平分两份
        renderer.setXLabelsColor(labelsColor);
        renderer.setYLabelsColor(0, labelsColor);
        renderer.setYLabelsVerticalPadding(-5);
        renderer.setYLabelsAlign(Paint.Align.RIGHT);
        renderer.setLabelsTextSize(12);// 设置坐标轴文字的大小
        renderer.setAxisTitleTextSize(15);// XY轴标签字号
        renderer.setPointSize((float) 1);
        renderer.setShowLegend(false); //是否显示图例
        renderer.setFitLegend(false); //图例字号自适应
        renderer.setMargins(new int[]{10, 0, 0, 0});// 设置图表的外边框margin(上/左/下/右)
        renderer.setMarginsColor(bgColor); //图标边框颜色(不含图标
    }

    //生成的点 固定在右 产生右平移的特点
    private void upDateCharts(int datas) {
        drawPack.add(datas);
        for (int addY : drawPack) {
            series.add(i, addY);
            i++;
        }
        if (i < MAX_POINT_X) {
            renderer.setXAxisMin(0);
            renderer.setXAxisMax(MAX_POINT_X);
        } else {
            renderer.setXAxisMin(series.getItemCount() - MAX_POINT_X);
            renderer.setXAxisMax(series.getItemCount());
        }
        drawPack.clear();
        chart.repaint();
    }

    //得到activity绘制 与activity连接
    public void recievedMessage(int flagBreBt, boolean boo) {
        this.flagBreBt = flagBreBt;
        BOO = boo;
        upDateCharts(flagBreBt);
//        handler.postDelayed(runnable, POINT_GENERATE_PERIOD);
    }

      Runnable runnable = new Runnable() {
           @Override
           public void run() {
               if (BOO) {
                   upDateCharts(flagBreBt);
                   if (runnable != null) {
                       runnable = null;
                   }
               }
               drawPack.clear();
               handler.postDelayed(this, POINT_GENERATE_PERIOD);
           }
       };
}

没啥好说的 如果有什么报错 基本上都是颜色什么的

唯一一个布局 :

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

    <LinearLayout
        android:id="@+id/lin_sine"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>

</RelativeLayout>

嗯 copy我也不介意

如果有什么问题 请QQ或邮箱联系 [email protected]