自己想着自己以后添加的每一项功能都做详细的介绍,前期都忘了....前期的所有功能也会抽时间做详细的介绍,就是看自己一步一步怎么实现的 记得自己前一个项目用图表,,费了好大的劲,,你看现在网上介绍的,,千篇一律...最后是自己找到了一篇很乱的代码,然后自己一点一点的还原,然后再一点一点的理解,摸索,测试,,,,,, 其实我最想知道的是导入了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就显示出来啦...
可能让人感觉乱乱乱...咱一步一步做就知道啦.. 咱先把下面的网格显示出来
说一下因为自己是在自己的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();
}
}
自己做了一些变动
我现在要把线变为动态的添加,以适应自己的软件
先不仔细介绍了,我先赶紧写完我的程序,担心自己的电脑会死机,时间太长了 后期补上