3-关于"小五物联"的功能介绍(添加波形图,Achartengine使用)

自己想着自己以后添加的每一项功能都做详细的介绍,前期都忘了....前期的所有功能也会抽时间做详细的介绍,就是看自己一步一步怎么实现的
记得自己前一个项目用图表,,费了好大的劲,,你看现在网上介绍的,,千篇一律...最后是自己找到了一篇很乱的代码,然后自己一点一点的还原,然后再一点一点的理解,摸索,测试,,,,,,
其实我最想知道的是导入了jar包了,如何显示一条曲线,然后如何显示两条曲线,直接告诉就完了呗,很多人都是介绍这功能那功能,最后来个显示,来个代码,然后稍微对代码一些地方做些解释,就完了,,,,我还不会走呢,我咋跑.....
先把jar包放到工程目录

有些地方要说一下

这是从别的地方截了一张图

其实是由两部分组成

底下的网格界面,和咱画在上面的线
底下的网格呢提供了一些方法,
背景颜色啦,网格颜色啦,横纵坐标显示的内容啦,整个能看见的界面显示多少个点啦,上下的宽度啦,能不能缩放啦,移动啦,等等啦
线呢也提供了一些方法
粗细程度啦,点的形状啦,颜色啦线的形状啦,
jar包里面的命名呢叫做 XXX渲染器
那个底层的叫

private XYMultipleSeriesRenderer multipleSeriesRenderer;// 渲染器容器(就是设置整个界面的布局参数,也是设置底层网格的方法类)

其实呢这个是对咱所看到的表的统称(包括下面的表格和上面的线)
下面的表格的一些参数就是用它设置的

multipleSeriesRenderer.setLabelsColor(labelColor);//所有的标题的颜色
        multipleSeriesRenderer.setMarginsColor(Color.BLACK);//网格框以外的颜色
        multipleSeriesRenderer.setAxesColor(axeColor);//设置X轴的颜色.

然后看线的


private XYSeriesRenderer mRenderer1;// 单条曲线渲染器```  

然后设置线的

mRenderer1 = new XYSeriesRenderer();//获取渲染的一些方法

    mRenderer1.setColor(curveColor);//曲线颜色
    mRenderer1.setLineWidth(3.0f);//折线宽度 
    //mRenderer1.setDisplayChartValuesDistance(10);///折线点的值距离折线点的距离 mRenderer1.setPointStyle(PointStyle.POINT);//描点风格，可以为圆点，方形点等等```

然后把线的加入到下面的渲染器里面


multipleSeriesRenderer.addSeriesRenderer(mRenderer1);```  

这样就完成了界面的设置了.
但是呢缺样东西-------数据
数据呢给了一个专门存放数据的数据集,为什么jia
叫集,因为好多曲线的话好多数据,放到一块就是集.....

private XYMultipleSeriesDataset multipleSeriesDataset;// 数据集容器

private XYSeries mSeries1;// 单条曲线数据集
private XYSeries mSeries2;// 单条曲线数据集
private XYSeries mSeries3;// 单条曲线数据集```

然后

multipleSeriesDataset = new XYMultipleSeriesDataset();//图表的数据集
        mSeries1 = new XYSeries(curveTitle1);//一条曲线的数据集
        mSeries2 = new XYSeries(curveTitle2);//一条曲线的数据集 mSeries3 = new XYSeries(curveTitle3);//一条曲线的数据集 //curveTitle1 是下面显示的线叫什么名字 multipleSeriesDataset.addSeries(mSeries1);//曲线的数据集加入总数据集 multipleSeriesDataset.addSeries(mSeries2);//曲线的数据集加入总数据集 multipleSeriesDataset.addSeries(mSeries3);//曲线的数据集加入总数据集

mGraphicalView = ChartFactory.getCubeLineChartView(context,multipleSeriesDataset, multipleSeriesRenderer, 0.1f);

把数据和界面交给一个View
别的界面加入这个View就显示出来啦...

扫描二维码关注公众号，回复： 91550 查看本文章

可能让人感觉乱乱乱...咱一步一步做就知道啦..
咱先把下面的网格显示出来

说一下因为自己是在自己的APP上添加功能,所以会很注意封装好,不会弄的乱七八糟,其实乱七八糟容易理解,后期看专门介绍画图的文章吧

public class AchartengineMethod {

    private Context context;
    /*方便让别的类获取这个类的context,这样就可以用获得的context来使用这个里面的方法*/ public AchartengineMethod(Context context) { this.context = context; } }

/*设置整体的渲染器,也就是设置底下的网格等一些参数*/
    /**
     * 
     * @param LabelsColor      所有标签的颜色
     * @param MarginsColor            网格框以外的颜色
     * @param AxesColor 设置X轴的颜色. * @param BackgroundColor 网格框背景色 * @param GridColor 网格颜色 * @param LegendTextSize 图例文字大小 * @param LabelsTextSize 设置刻度显示文字的大小(XY轴都会被设置) * @param PanLimits 设置滑动范围 * @param XLabelsPadding 设置标签的间距 * @param XLabels 设置X轴标签的个数 * @param YLabels 设置Y轴标签的个数 * @param XAxisMin 设置 X 轴起点 * @param XAxisMax 设置 X 轴终点 */ public void setXYMultipleSeriesRenderer(int LabelsColor,int MarginsColor,int AxesColor,int BackgroundColor ,int GridColor,int LegendTextSize,int LabelsTextSize,Double[] PanLimits,int XLabelsPadding,int XLabels ,int YLabels,int XAxisMin,int XAxisMax) { }

有些东西我也忘了,我先显示出来然后调整参数看看分别控制的什么
然后现在的

public class AchartengineMethod {

    private Context context; private XYMultipleSeriesRenderer multipleSeriesRenderer;// 整体的渲染器容器 //private XYSeriesRenderer mRenderer;// 曲线渲染器,在配置曲线的参数中创建新的 /*方便让别的类获取这个类的context,这样就可以用获得的context来使用这个里面的方法*/ public AchartengineMethod(Context context) { this.context = context; } /** * 设置整体的渲染器,也就是设置底下的网格等一些参数 * @param LabelsColor 所有标签的颜色 * @param MarginsColor 网格框以外的颜色 * @param AxesColor 设置X轴的颜色. * @param BackgroundColor 网格框背景色 * @param GridColor 网格颜色 * @param LegendTextSize 图例文字大小 * @param LabelsTextSize 设置刻度显示文字的大小(XY轴都会被设置) * @param PanLimits 设置滑动范围 * @param XLabelsPadding 设置标签的间距 * @param XLabels 设置X轴标签的个数 * @param YLabels 设置Y轴标签的个数 * @param XAxisMin 设置 X 轴起点 * @param XAxisMax 设置 X 轴终点 */ public void setXYMultipleSeriesRenderer(int LabelsColor,int MarginsColor,int AxesColor,int BackgroundColor ,int GridColor,int LegendTextSize,int LabelsTextSize,double[] PanLimits,int XLabelsPadding,int XLabels ,int YLabels,int XAxisMin,int XAxisMax) { multipleSeriesRenderer = new XYMultipleSeriesRenderer(); multipleSeriesRenderer.setLabelsColor(LabelsColor);//所有的标题的颜色 multipleSeriesRenderer.setMarginsColor(MarginsColor);//网格框以外的颜色 multipleSeriesRenderer.setAxesColor(AxesColor);//设置X轴的颜色. multipleSeriesRenderer.setBackgroundColor(BackgroundColor);//网格框背景色 multipleSeriesRenderer.setGridColor(GridColor);//网格颜色 multipleSeriesRenderer.setLegendTextSize(LegendTextSize);// 图例文字大小 --左下角的 multipleSeriesRenderer.setLabelsTextSize(LabelsTextSize);// 设置刻度显示文字的大小(XY轴都会被设置) multipleSeriesRenderer.setPanLimits(PanLimits);//设置滑动范围上下左右 multipleSeriesRenderer.setXLabelsPadding(XLabelsPadding);//设置标签的间距 multipleSeriesRenderer.setXLabels(XLabels);//设置X轴标签的个数 multipleSeriesRenderer.setYLabels(YLabels);//设置Y轴标签的个数 multipleSeriesRenderer.setXAxisMin(XAxisMin);//设置X轴的最小值为 multipleSeriesRenderer.setXAxisMax(XAxisMax);//设置X轴的最大值 multipleSeriesRenderer.setFitLegend(true);//图例大小自适应. multipleSeriesRenderer.setApplyBackgroundColor(true); //允许设置网格框背景色 multipleSeriesRenderer.setShowGrid(true);//显示网格 multipleSeriesRenderer.setShowLabels(true, true);//是否显示X轴和Y轴刻度 multipleSeriesRenderer.setShowLegend(true);//是否显示图例 multipleSeriesRenderer.setZoomEnabled(false, true);//设置坐标轴是否能够缩放 multipleSeriesRenderer.setPanEnabled(true,true);////设置滑动,这边是横向可以滑动,竖向不可滑动 multipleSeriesRenderer.setInScroll(true); //允许自适应 //multipleSeriesRenderer.setZoomButtonsVisible(false);//是否显示放大缩小按钮 //multipleSeriesRenderer.setChartTitle("数据显示");//设置图表标题 } /** * 配置曲线的参数 * @param setColor 曲线的颜色 * @param setLineWidth 曲线的宽度 */ public void setXYSeriesRenderer(int setColor,float setLineWidth) { XYSeriesRenderer mRenderer = new XYSeriesRenderer();//获取曲线渲染的一些方法(也是创建了一条曲线) mRenderer.setColor(setColor);//曲线颜色 mRenderer.setLineWidth(setLineWidth);//折线宽度 mRenderer.setPointStyle(PointStyle.POINT);//描点风格，可以为圆点，方形点等等 //mRenderer2.setDisplayChartValuesDistance(10);///折线点的值距离折线点的距离 multipleSeriesRenderer.addSeriesRenderer(mRenderer);//把曲线加入整个的渲染器中 } }

看现在的,加入了数据

public class AchartengineMethod {

    private Context context; private XYMultipleSeriesRenderer multipleSeriesRenderer;// 整体的渲染器容器 //private XYSeriesRenderer mRenderer;// 曲线渲染器,在配置曲线的参数中创建新的 private XYMultipleSeriesDataset multipleSeriesDataset;// 数据集容器 private GraphicalView mGraphicalView;//图表的视图 /*方便让别的类获取这个类的context,这样就可以用获得的context来使用这个class里面的方法*/ public AchartengineMethod(Context context) { this.context = context; } /** * @return 获取这个图形化的视图,加入到别的View就显示出来了 */ public GraphicalView getGraphicalView() { //数据 渲染器 平滑度 mGraphicalView = ChartFactory.getCubeLineChartView(context,multipleSeriesDataset, multipleSeriesRenderer, 0.1f); return mGraphicalView; } /** * 设置整体的渲染器,也就是设置底下的网格等一些参数 * @param LabelsColor 所有标签的颜色 * @param MarginsColor 网格框以外的颜色 * @param AxesColor 设置X轴的颜色. * @param BackgroundColor 网格框背景色 * @param GridColor 网格颜色 * @param LegendTextSize 图例文字大小 * @param LabelsTextSize 设置刻度显示文字的大小(XY轴都会被设置) * @param PanLimits 设置滑动范围 * @param XLabelsPadding 设置标签的间距 * @param XLabels 设置X轴标签的个数 * @param YLabels 设置Y轴标签的个数 * @param XAxisMin 设置 X 轴起点 * @param XAxisMax 设置 X 轴终点 */ public void setXYMultipleSeriesRenderer(int LabelsColor,int MarginsColor,int AxesColor,int BackgroundColor ,int GridColor,int LegendTextSize,int LabelsTextSize,double[] PanLimits,int XLabelsPadding,int XLabels ,int YLabels,int XAxisMin,int XAxisMax) { multipleSeriesRenderer = new XYMultipleSeriesRenderer();//设置图表的各种颜色啦大小啦等等参数 multipleSeriesDataset = new XYMultipleSeriesDataset();//图表的数据集,因为只创建一次所以放在这里 multipleSeriesRenderer.setLabelsColor(LabelsColor);//所有的标题的颜色 multipleSeriesRenderer.setMarginsColor(MarginsColor);//网格框以外的颜色 multipleSeriesRenderer.setAxesColor(AxesColor);//设置X轴的颜色. multipleSeriesRenderer.setBackgroundColor(BackgroundColor);//网格框背景色 multipleSeriesRenderer.setGridColor(GridColor);//网格颜色 multipleSeriesRenderer.setLegendTextSize(LegendTextSize);// 图例文字大小 --左下角的 multipleSeriesRenderer.setLabelsTextSize(LabelsTextSize);// 设置刻度显示文字的大小(XY轴都会被设置) multipleSeriesRenderer.setPanLimits(PanLimits);//设置滑动范围上下左右 multipleSeriesRenderer.setXLabelsPadding(XLabelsPadding);//设置标签的间距 multipleSeriesRenderer.setXLabels(XLabels);//设置X轴标签的个数 multipleSeriesRenderer.setYLabels(YLabels);//设置Y轴标签的个数 multipleSeriesRenderer.setXAxisMin(XAxisMin);//设置X轴的最小值为 multipleSeriesRenderer.setXAxisMax(XAxisMax);//设置X轴的最大值 multipleSeriesRenderer.setFitLegend(true);//图例大小自适应. multipleSeriesRenderer.setApplyBackgroundColor(true); //允许设置网格框背景色 multipleSeriesRenderer.setShowGrid(true);//显示网格 multipleSeriesRenderer.setShowLabels(true, true);//是否显示X轴和Y轴刻度 multipleSeriesRenderer.setShowLegend(true);//是否显示图例 multipleSeriesRenderer.setZoomEnabled(false, true);//设置坐标轴是否能够缩放 multipleSeriesRenderer.setPanEnabled(true,true);////设置滑动,这边是横向可以滑动,竖向不可滑动 multipleSeriesRenderer.setInScroll(true); //允许自适应 //multipleSeriesRenderer.setZoomButtonsVisible(false);//是否显示放大缩小按钮 //multipleSeriesRenderer.setChartTitle("数据显示");//设置图表标题 } /** * 配置曲线的参数 * @param setColor 曲线的颜色 * @param setLineWidth 曲线的宽度 */ public void setXYSeriesRenderer(int setColor,float setLineWidth) { XYSeriesRenderer mRenderer = new XYSeriesRenderer();//获取曲线渲染的一些方法(也是创建了一条曲线) mRenderer.setColor(setColor);//曲线颜色 mRenderer.setLineWidth(setLineWidth);//折线宽度 mRenderer.setPointStyle(PointStyle.POINT);//描点风格，可以为圆点，方形点等等 //mRenderer2.setDisplayChartValuesDistance(10);///折线点的值距离折线点的距离 multipleSeriesRenderer.addSeriesRenderer(mRenderer);//把曲线加入整个的渲染器中 } /** * 设置曲线的数据集 * @param curveTitle 曲线的名字,在最下面显示 */ public void setXYMultipleSeriesDataset(String curveTitle) { XYSeries mSeries = new XYSeries(curveTitle);//一条曲线的数据集 multipleSeriesDataset.addSeries(mSeries);//曲线的数据集加入总数据集 } }

最后呢

mGraphicalView 就是显示的视图了

有可能会问..数据怎么加进去,,怎么显示曲线的

所以

public class AchartengineMethod {

    private Context context; private XYMultipleSeriesRenderer multipleSeriesRenderer;// 整体的渲染器容器 private XYMultipleSeriesDataset multipleSeriesDataset;// 数据集容器 private GraphicalView mGraphicalView;//图表的视图 /*方便让别的类获取这个类的context,这样就可以用获得的context来使用这个class里面的方法*/ public AchartengineMethod(Context context) { this.context = context; } /** * @return 获取这个图形化的视图,加入到别的View就显示出来了 */ public GraphicalView getGraphicalView() { //数据 渲染器 平滑度 mGraphicalView = ChartFactory.getCubeLineChartView(context,multipleSeriesDataset, multipleSeriesRenderer, 0.1f); return mGraphicalView; } /** * 设置整体的渲染器,也就是设置底下的网格等一些参数 * @param LabelsColor 所有标签的颜色 * @param MarginsColor 网格框以外的颜色 * @param AxesColor 设置X轴的颜色. * @param BackgroundColor 网格框背景色 * @param GridColor 网格颜色 * @param LegendTextSize 图例文字大小 * @param LabelsTextSize 设置刻度显示文字的大小(XY轴都会被设置) * @param PanLimits 设置滑动范围 * @param XLabelsPadding 设置标签的间距 * @param XLabels 设置X轴标签的个数 * @param YLabels 设置Y轴标签的个数 * @param XAxisMin 设置 X 轴起点 * @param XAxisMax 设置 X 轴终点 */ public XYMultipleSeriesRenderer setXYMultipleSeriesRenderer(int LabelsColor,int MarginsColor,int AxesColor,int BackgroundColor ,int GridColor,int LegendTextSize,int LabelsTextSize,double[] PanLimits,int XLabelsPadding,int XLabels ,int YLabels,int XAxisMin,int XAxisMax) { multipleSeriesRenderer = new XYMultipleSeriesRenderer();//设置图表的各种颜色啦大小啦等等参数 multipleSeriesDataset = new XYMultipleSeriesDataset();//图表的数据集,因为只创建一次所以放在这里 multipleSeriesRenderer.setLabelsColor(LabelsColor);//所有的标题的颜色 multipleSeriesRenderer.setMarginsColor(MarginsColor);//网格框以外的颜色 multipleSeriesRenderer.setAxesColor(AxesColor);//设置X轴的颜色. multipleSeriesRenderer.setBackgroundColor(BackgroundColor);//网格框背景色 multipleSeriesRenderer.setGridColor(GridColor);//网格颜色 multipleSeriesRenderer.setLegendTextSize(LegendTextSize);// 图例文字大小 --左下角的 multipleSeriesRenderer.setLabelsTextSize(LabelsTextSize);// 设置刻度显示文字的大小(XY轴都会被设置) multipleSeriesRenderer.setPanLimits(PanLimits);//设置滑动范围上下左右 multipleSeriesRenderer.setXLabelsPadding(XLabelsPadding);//设置标签的间距 multipleSeriesRenderer.setXLabels(XLabels);//设置X轴标签的个数 multipleSeriesRenderer.setYLabels(YLabels);//设置Y轴标签的个数 multipleSeriesRenderer.setXAxisMin(XAxisMin);//设置X轴的最小值为 multipleSeriesRenderer.setXAxisMax(XAxisMax);//设置X轴的最大值 multipleSeriesRenderer.setFitLegend(true);//图例大小自适应. multipleSeriesRenderer.setApplyBackgroundColor(true); //允许设置网格框背景色 multipleSeriesRenderer.setShowGrid(true);//显示网格 multipleSeriesRenderer.setShowLabels(true, true);//是否显示X轴和Y轴刻度 multipleSeriesRenderer.setShowLegend(true);//是否显示图例 multipleSeriesRenderer.setZoomEnabled(false, true);//设置坐标轴是否能够缩放 multipleSeriesRenderer.setPanEnabled(true,true);////设置滑动,这边是横向可以滑动,竖向不可滑动 multipleSeriesRenderer.setInScroll(true); //允许自适应 //multipleSeriesRenderer.setZoomButtonsVisible(false);//是否显示放大缩小按钮 //multipleSeriesRenderer.setChartTitle("数据显示");//设置图表标题 return multipleSeriesRenderer; } /** * 配置曲线的参数 * @param setColor 曲线的颜色 * @param setLineWidth 曲线的宽度 */ public void setXYSeriesRenderer(int setColor,float setLineWidth) { XYSeriesRenderer mRenderer = new XYSeriesRenderer();//获取曲线渲染的一些方法(也是创建了一条曲线) mRenderer.setColor(setColor);//曲线颜色 mRenderer.setLineWidth(setLineWidth);//折线宽度 mRenderer.setPointStyle(PointStyle.POINT);//描点风格，可以为圆点，方形点等等 //mRenderer2.setDisplayChartValuesDistance(10);///折线点的值距离折线点的距离 multipleSeriesRenderer.addSeriesRenderer(mRenderer);//把曲线加入整个的渲染器中 } /** * 设置曲线的数据集 * @param curveTitle 曲线的名字,在最下面显示 */ public XYSeries setXYMultipleSeriesDataset(String curveTitle) { XYSeries mSeries = new XYSeries(curveTitle);//一条曲线的数据集 multipleSeriesDataset.addSeries(mSeries);//曲线的数据集加入总数据集 return mSeries; } }

忘了一件事

感觉没有多少东西....

看怎么用咱自己写的

public class ActiVityDataAchartengine extends Activity { private RelativeLayout mRelativeLayout;//把图标放在这个布局(View)里面 private GraphicalView mGraphicalView; private AchartengineMethod mAchartengineMethod; private XYMultipleSeriesRenderer mXyMultipleSeriesRenderer;//整体的渲染器 private XYSeries mXySeries;//曲线的数据设置 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_data_achartengine); mRelativeLayout = (RelativeLayout) findViewById(R.id.AcharRelativeLayout1);//获取布局 mAchartengineMethod = new AchartengineMethod(this);//获取画图的那个类 mAchartengineMethod.setXYMultipleSeriesRenderer(Color.RED, Color.BLACK, Color.RED, Color.BLACK, Color.argb(100, 0, 255, 0), 10, 10, new double[] {0,60,-200,200}, 1, 0, 10, 0, 60);//配置界面 mAchartengineMethod.setXYSeriesRenderer(Color.RED, 3.0f);//设置线的参数 mXySeries = mAchartengineMethod.setXYMultipleSeriesDataset("温度");//建一个曲线的数据,曲线名字 mGraphicalView = mAchartengineMethod.getGraphicalView();//获取那个图表 mRelativeLayout.addView(mGraphicalView);//把图表加在布局里面 } }

咱现在显示一下

可能会问,,网格呢,怎么乌黑的一篇....

这个achartengine哈,你不往里面写数据就是这个样子,乌黑一片是因为咱设置的内部背景和外面是黑色的
现在填几个数据

我先在原来的布局加上我需要的东西,然后再调整这个界面

有可能会问,我再加yiti一条线怎么加么

public class ActiVityDataAchartengine extends Activity { private RelativeLayout mRelativeLayout;//把图标放在这个布局(View)里面 private GraphicalView mGraphicalView; private AchartengineMethod mAchartengineMethod; private XYMultipleSeriesRenderer mXyMultipleSeriesRenderer;//整体的渲染器 private XYSeries mXySeries1;//曲线的数据设置 private XYSeries mXySeries2;//曲线的数据设置 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_data_achartengine); mRelativeLayout = (RelativeLayout) findViewById(R.id.AcharRelativeLayout1);//获取布局 mAchartengineMethod = new AchartengineMethod(this);//获取画图的那个类 mAchartengineMethod.setXYMultipleSeriesRenderer(Color.RED, Color.BLACK, Color.RED, Color.BLACK, Color.argb(100, 0, 255, 0), 10, 10, new double[] {0,60,-200,200}, 1, 0, 10, 0, 60);//配置界面 mAchartengineMethod.setXYSeriesRenderer(Color.RED, 3.0f);//设置线的参数 mXySeries1 = mAchartengineMethod.setXYMultipleSeriesDataset("温度");//建一个曲线的数据,曲线名字 mAchartengineMethod.setXYSeriesRenderer(Color.BLUE, 3.0f);//设置线的参数 mXySeries2 = mAchartengineMethod.setXYMultipleSeriesDataset("湿度");//建一个曲线的数据,曲线名字 mGraphicalView = mAchartengineMethod.getGraphicalView();//获取那个图表 mRelativeLayout.addView(mGraphicalView);//把图表加在布局里面 mXySeries1.add(1, 10); mXySeries1.add(10, 12); mXySeries2.add(5, 11); mXySeries2.add(12, 15); mGraphicalView.repaint(); } }

自己做了一些变动

我现在要把线变为动态的添加,以适应自己的软件

先不仔细介绍了,我先赶紧写完我的程序,担心自己的电脑会死机,时间太长了
后期补上

3-关于"小五物联"的功能介绍(添加波形图,Achartengine使用)

猜你喜欢