为了公司新功能,我坐了一个demo,涉及饼状图、柱状图、柱状和线性结合图
借鉴博客https://github.com/PhilJay/MPAndroidChart
http://www.jianshu.com/p/587946813a78
饼状图可以详见:http://blog.csdn.net/androidwubo/article/details/72922158
组合图可以详见:http://blog.csdn.net/androidwubo/article/details/72922171
该项目的源码:https://github.com/Orion-wubo/orion
步骤:(以柱状图为例)
1、引用(三种方式,不一一介绍了,看github)
2、根据需求选择相应的表
折线图 LineChart
条形图 BarChart
条形折线图 Combined-Chart
圆饼图 PieChart
雷达图 ScatterChart
K线图 CandleStickChart
泡泡图 BubbleChart
网状图 RadarChart
3、获取相应控件
mChart = (LineChart) findViewById(R.id.chart);
注:设置屏幕横向、全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE);
4、设置图标
mChart.setDrawBarShadow(false);//阴影
mChart.setPinchZoom(false);//true就是通过两手指滑动,xy轴都变化,false各变化各的
mChart.setDrawGridBackground(false);//背景
mChart.animateY(1000);//动画1000毫秒后执行
//设置图标说明(这个通用,比较简单,不注释了)
Legend l = mChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setForm(Legend.LegendForm.CIRCLE);
l.setFormSize(9f);
l.setTextSize(11f);
l.setXEntrySpace(4f);
//设置自定义mark(参考第二个博客)
当点击图表上的点时,将会弹出一个显示详细信息的View,所以需要设计一个MakerView继承默认的 MakerView 重写样式
public class MyMakerView extends MarkerView {
private TextView tvContent;
public MyMakerView (Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
}
/* 每次画 MakerView 时都会触发 Callback 方法,通常会在此方法内更新 View 的內容 */
@Override
public void refreshContent(Entry e, Highlight highlight) {
tvContent.setText("" + e.getVal());
}
/* * offset 是以点到的那个点(0,0) 中心然后向右下角画出来 * 所以如果要显示在点上方 * X=宽度的一半,负数 * Y=高度的负数 */
@Override
public int getXOffset() {
// this will center the marker-view horizontally
return -(getWidth() / 2);
}
@Override
public int getYOffset() {
// this will cause the marker-view to be above the selected value
return -getHeight();
}
}
然后在chart里加入此makerview
MyMakerView makerview = new MyMakerView(this,xxxxid);
lineChart.setMakerView(makerview);
5、设置限制线(我这里设置的人均)
//设置人均线
LimitLine ll1 = new LimitLine(average, "人均巡护面积");
ll1.setLineWidth(4f);
ll1.enableDashedLine(10f, 10f, 0f);//三个参数,第一个线宽长度,第二个线段之间宽度,第三个一般为0,是个补偿
ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
ll1.setTextSize(10f);
在你设置数据的时候有一个方法
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.addLimitLine(ll1);//添加进去就可以了
6、设置x、y轴数据(重点,对于我来说,嘎嘎)
//x轴数据
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//位置
xAxis.setCenterAxisLabels(true);//设置在轴中间
xAxis.setDrawGridLines(false);//轴线
xAxis.setLabelCount(areaname.length, false); //设置显示标签书,FALSE为自动调整
xAxis.setLabelRotationAngle(45);//设置x轴变迁的角度
xAxis.setGranularity(1f);//缩放时的最小距离
// xAxis.setAxisMinimum(0f);//
// xAxis.setAxisMaximum(areaname.length);
// xAxis.setValueFormatter(new DayAxisValueFormatter(areaname));
/**
* 发现这个返回的value值是一个从-1开始到数据最大个数的死循环,
* 所以areaname[(int) (value +26)% areaname.length],否则越界。
* 但是当你没有设置xAxis.setCenterAxisLabels(true);//设置在轴中间
* 那么这个value值是从0开始的到数据的一个循环,
* 我也看不懂源码,有高手可以指点一下。
*/
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return areaname[(int) (value +26)% areaname.length];
}
});
//y轴数据(设置基本和x轴一样)
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.addLimitLine(ll1);//此处是添加限制线
leftAxis.setDrawGridLines(true);
leftAxis.setLabelCount(4, false);
leftAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return (int) value + "亩/人";
}
});
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(0f);//该控件距离上面的距离类似于marginTop
/**
* 如果设置了最大最小,那么不能动态计算轴的值
*/
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
// leftAxis.setAxisMaximum(160f); //动态设置最大,
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setEnabled(false);//这个意思是不显示右边的y轴
7、设置数据 (从字面意思就可以理解了)
ArrayList
yVals1 = new ArrayList();
int total = 0;
for (int i = 0; i < count; i++) {
int val = (int) (Math.random() * 20);
yVals1.add(new BarEntry(i + 0.5f, val));
total = val + total;
}
average = total / count;
BarDataSet set1 = new BarDataSet(yVals1, "人均巡护面积");
set1.setDrawIcons(false);
set1.setColors(rgb("#ff9d00"));
ArrayList dataSets = new ArrayList();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(0.5f);
mChart.setData(data);
实际中存在的问题
如果是动态设置数据,可以在当如果为空的时候,调用mChart.clean;