可能很多Android开发小伙伴也遇到过类似的需求,要求你做个图表什么的!
此次运用的是MPandroidChart框架 github地址:https://github.com/PhilJay/MPAndroidChart
网上的类似博客也不少,我只是把这个框架的几种图表整理了一下,写了个Demo,不喜勿喷!
废话不多说,看效果图!
有没有小伙伴需要的呢?
下面我们以柱状图为例:
1.XML布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/spread_bar_chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</com.github.mikephil.charting.charts.BarChart>
</LinearLayout>
2.Activity 类
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.demo_bar_chart);
spread_bar_chart=(BarChart)findViewById(R.id.spread_bar_chart);
BarData barData = getBarData(5, 150);
showChart(spread_bar_chart, barData);
}
3.主要是其中的 getBarData和 showChart方法
/**
* 生成一个数据
* @param count 表示图表中有多少个
* @param range 用来生成range以内的随机数
* @return
*/
private BarData getBarData(int count, float range) {
ArrayList<String> xValues = new ArrayList<String>();
for (int i = 0; i < count; i++) {
// x轴显示的数据,这里默认使用数字下标显示
xValues.add("标题" + i);
}
// y轴的数据
List<BarEntry> yValues = new ArrayList<BarEntry>();
for (int i = 0; i < count; i++) {
float value = (float) (Math.random() * range) + 3;
yValues.add(new BarEntry(value, i));
}
/* xValues.add("标题 测试" + 77);
yValues.add(new BarEntry(300, count)); */
BarDataSet barDataSet = new BarDataSet(yValues,"柱状图");/*显示在比例图上*/
//barDataSet.setColor(Color.BLUE);//设置数据条颜色
barDataSet.setBarSpacePercent(50);//柱子之间的 间距
ArrayList<Integer> colors = new ArrayList<Integer>();
// 饼图颜色
colors.add(Color.BLACK);
colors.add(Color.YELLOW);
colors.add(Color.BLUE);
colors.add(Color.GRAY);
colors.add(Color.GREEN);
colors.add(Color.WHITE);
barDataSet.setColors(colors);
BarData barData = new BarData(xValues, barDataSet);
barData.setValueTextColor(Color.WHITE);//设置柱状图 上方数据颜色
return barData;
}
private void showChart(BarChart barChart, BarData barData) {
barChart.setData(barData); //设置数据
barChart.setDescription("");// 数据描述
Legend mLegend = barChart.getLegend(); //设置比例图
mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
mLegend.setEnabled(false);//取消Label
barChart.animateY(2000);// 立即执行的动画,x轴
barChart.setBackgroundColor(Color.RED);// 设置背景
barChart.setDrawBorders(true); 是否在折线图上添加边框
barChart.setBorderColor(Color.TRANSPARENT); //边框颜色
barChart.setDrawGridBackground(true); // 是否显示表格颜色
barChart.setGridBackgroundColor(Color.RED); // 表格的的颜色
barChart.setDrawValueAboveBar(true);//设置每条数据的值得位置
//barChart.setDrawBarShadow(true); 显示背后的灰色背景
barChart.setTouchEnabled(true); // 设置是否可以触摸
barChart.setHighlightEnabled(false);//设置手指点击时 是否突出图标 高亮
barChart.setDragEnabled(true);// 是否可以拖拽
barChart.setScaleEnabled(true);// 是否可以缩放
barChart.getXAxis().setPosition(XAxisPosition.BOTTOM);// 让x轴在下面
// barChart.getXAxis().setGridColor(Color.RED);//设置竖线
barChart.getAxisRight().setEnabled(false); // 隐藏右边 的坐标轴
// barChart.getAxisLeft().setEnabled(false);// 隐藏左边 的坐标轴
// barChart.getAxisLeft().setAxisLineColor(Color.TRANSPARENT);//左边线设置透明
//barChart.getAxisLeft().setTextColor(Color.TRANSPARENT);//左边字体颜色
//隐藏左边坐标轴横网格线
barChart.getAxisLeft().setDrawGridLines(true);
//隐藏右边坐标轴横网格线
barChart.getAxisRight().setDrawGridLines(false);
//隐藏X轴竖网格线
barChart.getXAxis().setDrawGridLines(false);
barChart.getAxisLeft().setTextColor(Color.WHITE); //左边字体颜色
barChart.getAxisLeft().setAxisLineColor(Color.WHITE);//左边竖线颜色
barChart.getAxisLeft().setGridColor(Color.YELLOW);//设置横线网格颜色
barChart.getXAxis().setAxisLineColor(Color.GREEN);//底部这根线颜色
barChart.getXAxis().setTextColor(Color.BLUE); //X轴标题颜色
barChart.getXAxis().setTextSize(15);//X轴标题字体
}
其中有详细的注释,就不多废话了!~其他图标设置的属性也和这个类似!
Demo下载地址:http://download.csdn.net/detail/lijiamu421294020/9383491