先引入库 :
compile 'com.github.lecho:hellocharts-android:v1.5.8'
GitHub链接地址:https://github.com/lecho/hellocharts-android
主布局
<LinearLayout android:layout_marginTop="110dp" android:layout_width="match_parent" android:background="@drawable/whitebg" android:layout_marginHorizontal="25dp" android:paddingVertical="5dp" android:layout_gravity="center" android:gravity="center" android:layout_height="160dp" android:orientation="horizontal"> <LinearLayout android:layout_width="0dp" android:layout_weight="2" android:gravity="center" android:layout_height="match_parent"> <lecho.lib.hellocharts.view.PieChartView android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="match_parent" > </lecho.lib.hellocharts.view.PieChartView> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:layout_height="wrap_content"> <include layout="@layout/money_right"/> </LinearLayout> </LinearLayout>
--右侧子布局(在主布局中引入)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#46c099" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11sp" android:text="xxx" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#8180ff" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="xxxx" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#50b2ef" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="xxxx" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#aad8fb" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="xxxxx" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#f7d878" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="xxxxxx" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#c8e9a0" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="基金" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:gravity="center" android:orientation="horizontal"> <View android:layout_width="15dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:background="#f4a277" /> <TextView android:textSize="11sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ICO" /> </LinearLayout> </LinearLayout> </LinearLayout>
代码部分
private void initCharts() { chart = findViewById(R.id.chart); chart.setOnValueTouchListener(new ValueTouchListener()); generateData(); } /** * 获取数据 */ private void setPieChartData() { for (int i = 0; i < data.length; ++i) { SliceValue sliceValue = new SliceValue((float) data[i], colorData[i]); values.add(sliceValue); } } private void generateData() { setPieChartData(); pieChardata = new PieChartData(); chart.setViewportCalculationEnabled(true);//设置饼图自动适应大小 pieChardata.setHasLabels(true);//显示表情 pieChardata.setValues(values);//填充数据 pieChardata.setHasLabels(hasLabels);//是否展示lable pieChardata.setValueLabelTextSize(8);//lable字体大小 pieChardata.setHasLabelsOnlyForSelected(hasLabelForSelected); pieChardata.setHasLabelsOutside(hasLabelsOutside); pieChardata.setHasCenterCircle(hasCenterCircle); pieChardata.setCenterCircleScale(0.5f);//设置环形的大小级别 chart.setPieChartData(pieChardata); chart.setCircleFillRatio(0.9f);//如果chart挤压lable显示不完全,设置这个属性 // chart.setValueSelectionEnabled(true);//选择饼图某一块变大 chart.setAlpha(0.9f);//设置透明度 // chart.setCircleFillRatio(1f);//设置饼图大小 if (isExploded) { pieChardata.setSlicesSpacing(24); } chart.setPieChartData(pieChardata); } private class ValueTouchListener implements PieChartOnValueSelectListener { @Override public void onValueSelected(int arcIndex, SliceValue value) { Toast.makeText(mContext, "Selected: " + value, Toast.LENGTH_SHORT).show(); } @Override public void onValueDeselected() { } }
在oncreate中调用
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_count_money); initCharts(); // loadData(); }
属性
private PieChartView chart; //数据 private PieChartData pieChardata; List<SliceValue> values = new ArrayList<>(); private int[] data = {21, 20, 9, 2, 19,20,70}; private int[] colorData = {Color.parseColor("#46c099"), Color.parseColor("#8180ff"), Color.parseColor("#50b2ef"), Color.parseColor("#aad8fb"), Color.parseColor("#f7d878"), Color.parseColor("#c8e9a0"), Color.parseColor("#f4a277")};//颜色可以默认,chart有个colorUtil工具类,随机颜色 private boolean hasLabels = true; private boolean hasLabelsOutside = true; private boolean hasCenterCircle = false; private boolean isExploded = false; private boolean hasLabelForSelected = false;
最终效果:
参照GitHub上的demo中pieChartView
修改部分属性,完成!