近期项目里有要加入更加复杂的图标了,曾经一些简单的曲线图,饼状图。风险指示图等,都是自己画。随着难度的添加。越来越力不从心。曾经研究过achartenginee图标框架,但发现achartenginee的可定制性实在不敢恭维,做出来的图标根本不能满足需求。所以又在github上搜索android chart,发现了排第一的这款图标框架。大概预计了一下,是符合自己的要求的,于是down下来。研究研究,确实要比其它已知的框架强大。特此,总结一下其使用方法。
MPChart框架的长处:1.简单易用,全部的图标都能够当做一个普通的View在我们的布局文件里定义。与在布局中定义一个TextView没有不论什么的差别,使用也基本一样,通过fandViewById()就可以。然后向chart中加入数据就可以。
2.完好的事件冲突处理。在使用achartenginee时,发现图表一旦放在ScrollView中,则会产生事件冲突,导致ScrollView滑动不灵敏,而MPChart在事件处理上堪称完美。不仅在ScrollView中不会引起不论什么事件冲突,并且图表还能够夸张的放在LIstView,ViewPager中。不要太强大啊。
3.强大的可定制性,仅仅要是你能看到的。就能够改动为你想要的样式,这一点是我选择它的主要长处。
4.一句话就可实现的动画效果,但有点小bug.但作者还在不停的更新。
基于以上几点,我们基本能够抱起其它的图表框架而一心使用MPChart就可以,以下先看一下源代码demo的效果图,以及我自己定制的一个曲线图:
效果简直不谈啊,太强大了,必须学会使用啊。
以下讲一下我对其代码结构的理解:
1.源代码charts包中定义了全部能够绘制的图标类型。包含曲线图。饼状图,柱状图,散点图,以及混合图。
chart主要处理图表的交互事件。动画,组件的绘制等。
2.源代码components包中定义了图表中全部的组件,包含x轴(XAxis),y轴(YAxis)。表头(Lenged),标识(MarkerView).
3.源代码data包中则是不同类型的图表须要不同的数据类型。
4.源代码listener包中定义了全部的事件类型。
这几个包是我们须要知道的,通过chart包中的随意一个实例,能够进行我们须要的不论什么定制。比如:想要定制X轴的数据或者样式。
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(); //定制X轴是在图表上方还是下方。
xAxis.setLabelsToSkip(); //定制X轴Label间隔。
xAxis.setAvoidFirstLastClipping(); //定制X轴起点和终点Label不能超出屏幕。
Y轴的操作类似。
Lenged l = mChart.getLenged();
l.setEnabled(); //定制表头是否显示。
l.setForm(); //定制表头样式。是circle,square。还是line
等等,仅仅要是你能看到的样式,都能够定制。你没看到的也能够定制。以下列贴出第一个我定制的图的源代码:
lineView = new LineChart(this);
lineView.setDescription("");
lineView.setScaleEnabled(false);
lineView.getAxisRight().setEnabled(true);
lineView.setDrawGridBackground(false);
lineView.setTouchEnabled(false); //设置图表滑动是否可用
lineView.getLegend().setEnabled(false); //设置表头不可用
lineView.setHardwareAccelerationEnabled(true);
ArrayList<Entry> yRawData = new ArrayList<Entry>();
ArrayList<String> xRawDatas = new ArrayList<String>();
int index = 0;
for (int i = array.length() - 1; i >= 0; i--)
{
if (array.get(i) != null)
{
JSONObject jsonObj = (JSONObject) array.get(i);
yRawData.add(new Entry(Float.parseFloat(jsonObj.optString("profitRate")), index));
xRawDatas.add(DateFormatHelp.formatDateToNeededFormat(jsonObj.optString("dt").concat("000"),
DateFormat.DATE_1));
index++;
initMaxMin(Float.parseFloat(jsonObj.optString("profitRate")));
}
}
/**
* x轴样式设置
*/
XAxis xAxis = lineView.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);// 设置x轴在底部显示
xAxis.setAvoidFirstLastClipping(true);
xAxis.setSpaceBetweenLabels(0); // x轴间距
xAxis.setTextColor(resource.getColor(R.color.grey_low_txt));
xAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
xAxis.setDrawGridLines(true);//设置是否显示横轴表格
xAxis.setGridColor(resource.getColor(R.color.color_dddddd));//设置x轴表格颜色
/**
* y轴样式设置
*/
YAxis leftAxis = lineView.getAxisLeft();
leftAxis.setStartAtZero(false);
leftAxis.setLabelCount(yAxislabelNum, true); //设置Y轴Label数量
leftAxis.setDrawLimitLinesBehindData(true);
leftAxis.setTextColor(resource.getColor(R.color.grey_low_txt)); //设置左側Y轴Label颜色
leftAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd)); //设置左側Y轴颜色
leftAxis.setDrawGridLines(true); //设置显示Y轴表格线
leftAxis.setGridColor(resource.getColor(R.color.color_dddddd)); //设置Y轴表格线颜色
leftAxis.setAxisMaxValue(yAxisMax + yAxisGap); // 设置Y轴最大值
leftAxis.setAxisMinValue(yAxisMin - yAxisGap);// 设置Y轴最小值
YAxis rightAxis = lineView.getAxisRight();
rightAxis.setDrawLabels(false); //设置右側Y轴是否显示 Label
rightAxis.setDrawGridLines(false);
rightAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
/**
* 曲线样式设置
*/
LineDataSet set = new LineDataSet(yRawData, "");
set.setDrawCubic(true); //设置曲线样式为cubie
set.setCubicIntensity(0.2f);//置曲线顺滑度
set.setLineWidth(Util.dip2px(this, 1.0f)); //射置曲线width
set.setColor(resource.getColor(R.color.color_fd4634));//射置曲线颜色
set.setCircleSize(Util.dip2px(this, 2.0f));//射置曲线上圆点大小
set.setCircleColor(resource.getColor(R.color.color_fd4634));//射置曲线上圆点颜色
set.setFillColor(resource.getColor(R.color.color_fd4634));//射置曲线填充颜色
set.setFillAlpha(128);//射置曲线填充颜色透明度
set.setDrawFilled(true);//设置曲线填冲是否启用
set.setDrawValues(false);//设置是否显示点值
LineData data = new LineData(xRawDatas, set);
lineView.setData(data);//绑定数据到图表
lineView.invalidate();
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, Util.dip2px(this, 150));
contentLayout.addView(lineView, params);
学会使用这个图表框架后。效率能够大大的提高。普通的图表需求也不用在操心了。。
。
近期项目里有要加入更加复杂的图标了,曾经一些简单的曲线图,饼状图。风险指示图等,都是自己画。随着难度的添加。越来越力不从心。曾经研究过achartenginee图标框架,但发现achartenginee的可定制性实在不敢恭维,做出来的图标根本不能满足需求。所以又在github上搜索android chart,发现了排第一的这款图标框架。大概预计了一下,是符合自己的要求的,于是down下来。研究研究,确实要比其它已知的框架强大。特此,总结一下其使用方法。
MPChart框架的长处:1.简单易用,全部的图标都能够当做一个普通的View在我们的布局文件里定义。与在布局中定义一个TextView没有不论什么的差别,使用也基本一样,通过fandViewById()就可以。然后向chart中加入数据就可以。
2.完好的事件冲突处理。在使用achartenginee时,发现图表一旦放在ScrollView中,则会产生事件冲突,导致ScrollView滑动不灵敏,而MPChart在事件处理上堪称完美。不仅在ScrollView中不会引起不论什么事件冲突,并且图表还能够夸张的放在LIstView,ViewPager中。不要太强大啊。
3.强大的可定制性,仅仅要是你能看到的。就能够改动为你想要的样式,这一点是我选择它的主要长处。
4.一句话就可实现的动画效果,但有点小bug.但作者还在不停的更新。
基于以上几点,我们基本能够抱起其它的图表框架而一心使用MPChart就可以,以下先看一下源代码demo的效果图,以及我自己定制的一个曲线图:
效果简直不谈啊,太强大了,必须学会使用啊。
以下讲一下我对其代码结构的理解:
1.源代码charts包中定义了全部能够绘制的图标类型。包含曲线图。饼状图,柱状图,散点图,以及混合图。
chart主要处理图表的交互事件。动画,组件的绘制等。
2.源代码components包中定义了图表中全部的组件,包含x轴(XAxis),y轴(YAxis)。表头(Lenged),标识(MarkerView).
3.源代码data包中则是不同类型的图表须要不同的数据类型。
4.源代码listener包中定义了全部的事件类型。
这几个包是我们须要知道的,通过chart包中的随意一个实例,能够进行我们须要的不论什么定制。比如:想要定制X轴的数据或者样式。
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(); //定制X轴是在图表上方还是下方。
xAxis.setLabelsToSkip(); //定制X轴Label间隔。
xAxis.setAvoidFirstLastClipping(); //定制X轴起点和终点Label不能超出屏幕。
Y轴的操作类似。
Lenged l = mChart.getLenged();
l.setEnabled(); //定制表头是否显示。
l.setForm(); //定制表头样式。是circle,square。还是line
等等,仅仅要是你能看到的样式,都能够定制。你没看到的也能够定制。以下列贴出第一个我定制的图的源代码:
lineView = new LineChart(this);
lineView.setDescription("");
lineView.setScaleEnabled(false);
lineView.getAxisRight().setEnabled(true);
lineView.setDrawGridBackground(false);
lineView.setTouchEnabled(false); //设置图表滑动是否可用
lineView.getLegend().setEnabled(false); //设置表头不可用
lineView.setHardwareAccelerationEnabled(true);
ArrayList<Entry> yRawData = new ArrayList<Entry>();
ArrayList<String> xRawDatas = new ArrayList<String>();
int index = 0;
for (int i = array.length() - 1; i >= 0; i--)
{
if (array.get(i) != null)
{
JSONObject jsonObj = (JSONObject) array.get(i);
yRawData.add(new Entry(Float.parseFloat(jsonObj.optString("profitRate")), index));
xRawDatas.add(DateFormatHelp.formatDateToNeededFormat(jsonObj.optString("dt").concat("000"),
DateFormat.DATE_1));
index++;
initMaxMin(Float.parseFloat(jsonObj.optString("profitRate")));
}
}
/**
* x轴样式设置
*/
XAxis xAxis = lineView.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);// 设置x轴在底部显示
xAxis.setAvoidFirstLastClipping(true);
xAxis.setSpaceBetweenLabels(0); // x轴间距
xAxis.setTextColor(resource.getColor(R.color.grey_low_txt));
xAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
xAxis.setDrawGridLines(true);//设置是否显示横轴表格
xAxis.setGridColor(resource.getColor(R.color.color_dddddd));//设置x轴表格颜色
/**
* y轴样式设置
*/
YAxis leftAxis = lineView.getAxisLeft();
leftAxis.setStartAtZero(false);
leftAxis.setLabelCount(yAxislabelNum, true); //设置Y轴Label数量
leftAxis.setDrawLimitLinesBehindData(true);
leftAxis.setTextColor(resource.getColor(R.color.grey_low_txt)); //设置左側Y轴Label颜色
leftAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd)); //设置左側Y轴颜色
leftAxis.setDrawGridLines(true); //设置显示Y轴表格线
leftAxis.setGridColor(resource.getColor(R.color.color_dddddd)); //设置Y轴表格线颜色
leftAxis.setAxisMaxValue(yAxisMax + yAxisGap); // 设置Y轴最大值
leftAxis.setAxisMinValue(yAxisMin - yAxisGap);// 设置Y轴最小值
YAxis rightAxis = lineView.getAxisRight();
rightAxis.setDrawLabels(false); //设置右側Y轴是否显示 Label
rightAxis.setDrawGridLines(false);
rightAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
/**
* 曲线样式设置
*/
LineDataSet set = new LineDataSet(yRawData, "");
set.setDrawCubic(true); //设置曲线样式为cubie
set.setCubicIntensity(0.2f);//置曲线顺滑度
set.setLineWidth(Util.dip2px(this, 1.0f)); //射置曲线width
set.setColor(resource.getColor(R.color.color_fd4634));//射置曲线颜色
set.setCircleSize(Util.dip2px(this, 2.0f));//射置曲线上圆点大小
set.setCircleColor(resource.getColor(R.color.color_fd4634));//射置曲线上圆点颜色
set.setFillColor(resource.getColor(R.color.color_fd4634));//射置曲线填充颜色
set.setFillAlpha(128);//射置曲线填充颜色透明度
set.setDrawFilled(true);//设置曲线填冲是否启用
set.setDrawValues(false);//设置是否显示点值
LineData data = new LineData(xRawDatas, set);
lineView.setData(data);//绑定数据到图表
lineView.invalidate();
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, Util.dip2px(this, 150));
contentLayout.addView(lineView, params);
学会使用这个图表框架后。效率能够大大的提高。普通的图表需求也不用在操心了。。
。