MPAndroidChart使用详解－－BarChart和PieChart

MPAndroidChart使用详解－－BarChart和PieChart使用实例

1. app的build.gradle中添加依赖：

implementation 'com.github.PhilJay:MPAndroidChart:v3.0.1'

2. 项目的build.gradle中添加：

allprojects {repositories {……maven { url 'https://jitpack.io' }}
}

3. 布局文件：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:fitsSystemWindows="true"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".modules.analysis.collect.AnalysisCollectActivity"><LinearLayoutandroid:orientation="vertical"android:paddingTop="@dimen/px30"android:layout_width="match_parent"android:layout_height="match_parent"><com.github.mikephil.charting.charts.BarChartandroid:id="@+id/bc_collect"android:layout_marginHorizontal="@dimen/px20"android:layout_width="match_parent"android:layout_height="260dp"/><com.github.mikephil.charting.charts.PieChartandroid:id="@+id/pc_collect"android:layout_marginTop="@dimen/px30"android:layout_marginHorizontal="@dimen/px20"android:layout_width="match_parent"android:layout_height="240dp"/><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_collect"android:layout_marginHorizontal="@dimen/px30"android:layout_marginBottom="@dimen/px20"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout></ScrollView>

4. AnalysisCollectActivity.java

public class AnalysisCollectActivity extends BaseActivity {private static final String TAG = "AnalysisCollectActivity";private Context mContext;@BindView(R.id.bc_collect)BarChart bc_collect;@BindView(R.id.pc_collect)PieChart pc_collect;@BindView(R.id.rv_collect)RecyclerView rv_collect;private List<CollectData> collectDataList = new ArrayList<>();private List<CollectDataBL> collectDataBLList = new ArrayList<>();private List<CollectDetailBean> collectDetailBeans = new ArrayList<>();@Overridepublic int getLayoutResID() {return R.layout.activity_analysis_collect;}public void initContentView(@Nullable Bundle savedInstanceState) {mContext = AnalysisCollectActivity.this;//柱状图点击监听bc_collect.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {@Overridepublic void onValueSelected(Entry e, Highlight h) {if (e.getData() != null) {CollectData collectData = (CollectData) e.getData();getCollectDetail(collectData.getId());}}@Overridepublic void onNothingSelected() {}});}@Overridepublic void initData(@Nullable Bundle savedInstanceState) {getCollectData();}private void getCollectData() {HashMap<String, Object> baseParam = WebFrontUtil.getBaseParam();OkHttpUtil.post(TAG, WebApi.ACTIVITY_ANALYSIS_COLLECT, baseParam, new StringCallback() {@Overridepublic void onError(Call call, Exception e, int id) {Log.d(TAG,"getCollectData e="+e);}@Overridepublic void onResponse(String response, int id) {Log.d(TAG,"getCollectData response="+response);try {JSONObject object = new JSONObject(response);if ((int)object.get("code") == 200) {JSONObject object1 = object.getJSONObject("data");if (object1 == null) return;JSONArray array = object1.getJSONArray("data");Gson gson = new Gson();for (int i= 0;i<array.length();i++) {CollectData resultBean = gson.fromJson(array.get(i).toString(), CollectData.class);collectDataList.add(resultBean);}//柱状图设置ChartUtils.initBarChart(bc_collect,collectDataList.size(),true,false);setBarChartData(bc_collect);//与上一行代码同样的效果//convertData(collectDataList);List<PieEntry> entries = new ArrayList<>();JSONArray array1 = object1.getJSONArray("dataBL");for (int i= 0;i<array1.length();i++) {CollectDataBL resultBean = gson.fromJson(array1.get(i).toString(), CollectDataBL.class);PieEntry pieEntry = new PieEntry(resultBean.getOfficeCount(),resultBean.getType());entries.add(pieEntry);collectDataBLList.add(resultBean);}ChartUtils.initPieChart(pc_collect,false);ChartUtils.setPieData(entries, pc_collect);}} catch (JSONException e) {e.printStackTrace();}}});}//柱状数据填充private void setBarChartData(BarChart mBarChart) {List<BarEntry> barEntries = new ArrayList<>();List<BarEntry> barEntries1 = new ArrayList<>();for (int i= 0; i< collectDataList.size(); i++) {CollectData bean = collectDataList.get(i);BarEntry barEntry = new BarEntry(i,bean.getValue());barEntry.setData(bean);barEntries.add(barEntry);}for (int i= 0; i< collectDataList.size(); i++) {CollectData bean = collectDataList.get(i);BarEntry barEntry = new BarEntry(i,bean.getValueInspect());barEntry.setData(bean);barEntries1.add(barEntry);}//X轴自定义值XAxis xAxis = mBarChart.getXAxis();//X轴自定义值xAxis.setValueFormatter(new IAxisValueFormatter() {@Overridepublic String getFormattedValue(float value, AxisBase axis) {//当设置了xAxis.setAxisMinimum(0f);时，value的值可能为负值，会报空指针异常if (value < 0) {return "";}String labelValue = collectDataList.get((int) value % collectDataList.size()).getName();if (labelValue.length() > 4) {labelValue = labelValue.substring(0,4)+"…";}return labelValue;}});List<IBarDataSet> barDataSets = new ArrayList<>();//BarDataSet第二个参数为图例的labelBarDataSet barDataSet = new BarDataSet(barEntries,"单位总数");barDataSet.setColor(getResources().getColor(R.color.color_shop_title));barDataSet.setFormSize(15.f);
//        barDataSet.setFormLineWidth(1f);barDataSet.setDrawValues(false);BarDataSet barDataSet1 = new BarDataSet(barEntries1,"已检查单位数");barDataSet1.setColor(getResources().getColor(R.color.color_expire));barDataSet1.setFormSize(15.f);
//        barDataSet1.setFormLineWidth(1f);barDataSet1.setDrawValues(false);barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);barDataSet1.setAxisDependency(YAxis.AxisDependency.LEFT);barDataSets.add(barDataSet);barDataSets.add(barDataSet1);BarData data = new BarData(barDataSet,barDataSet1);mBarChart.setData(data);// 设置 柱子宽度
//        float barWidth = 0.4f;
//        float groupSpace = 0.2f;
//        float barSpace = 0.00f;float groupSpace = 0.3f; //柱状图组之间的间距float barSpace = (float) ((1 - 0.12) / 2 / 10); // x4 DataSetfloat barWidth = (float) ((1 - 0.3) / 2 / 10 * 9); // x4 DataSetdata.setBarWidth(barWidth);//num为多条柱状图的条数Log.e(TAG,"value = "+((barWidth + barSpace) * num + groupSpace));mBarChart.groupBars(0f, groupSpace, barSpace);mBarChart.invalidate();}
}

5. BarChart和PieChart的工具类：

ChartUtils.java

public class ChartUtils {/**  柱状图初始化*  size 为数据的条数*  isLegend 为是否显示图例*  isSingle 为是否为单柱状图* */public static void initBarChart(BarChart mBarChart, int size, boolean isLegend, boolean isSingle) {mBarChart.setExtraOffsets(0, 20, 20, 20);//初始化mBarChart.setBackgroundColor(Color.WHITE);//不显示图表网格mBarChart.setDrawGridBackground(false);//背景阴影mBarChart.setDrawBarShadow(false);mBarChart.setHighlightFullBarEnabled(false);//显示边框mBarChart.setDrawBorders(true);// 二指控制X轴Y轴同时放大mBarChart.setPinchZoom(false);mBarChart.setDoubleTapToZoomEnabled(false);//设置X轴显示文字旋转角度-60意为逆时针旋转60度
//        mBarChart.getXAxis().setLabelRotationAngle(-30);// 设置最大可见Value值的数量 针对于ValueFormartter有效果mBarChart.setMaxVisibleValueCount(size+10);mBarChart.setFitBars(false);
//        mBarChart.setKeepPositionOnRotation(false);mBarChart.fitScreen();/* X轴的设置 */XAxis xAxis = mBarChart.getXAxis();//设置X轴显示位置xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//X轴横坐标显示的数量xAxis.setLabelCount(size);//不显示X轴网格线xAxis.setDrawGridLines(false);//不显示X轴线条xAxis.setDrawAxisLine(false);
//        xAxis.setYOffset(150);
//        xAxis.setXOffset(10);
//        xAxis.setGranularity(1f);//设置最小间隔，防止当放大时，出现重复标签。
//        mBarChart.fitScreen();Log.e("ChartUtils",""+xAxis.getAxisMinimum());//解决柱状图显示不全的问题，设置完xAxis.setAxisMinimum(0f);之后，柱状图就显示全了，但是X轴标签显示不对，全都贴边显示if (!isSingle) {xAxis.setAxisMaximum(size);xAxis.setAxisMinimum(0f);xAxis.setCenterAxisLabels(true);}/* Y轴设置 */YAxis leftAxis = mBarChart.getAxisLeft();YAxis rightAxis = mBarChart.getAxisRight();//不显示X轴 Y轴线条leftAxis.setDrawAxisLine(true);rightAxis.setDrawAxisLine(false);
//        leftAxis.setXOffset(0);leftAxis.setYOffset(0);//不显示左侧Y轴rightAxis.setEnabled(false);//右侧Y轴网格线设置为虚线leftAxis.enableGridDashedLine(10f, 10f, 0f);//设置Y左边轴显示的值 label 数量leftAxis.setLabelCount(7, true);leftAxis.setAxisMinValue(0);//设置值显示的位置，我们这里设置为显示在Y轴外面leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);//设置Y轴 与值的空间空隙 这里设置30f意为30%空隙，默认是10%leftAxis.setSpaceTop(0f);
//        leftAxis.setAxisMinimum(0f);//设置Y轴最小值/***折线图例 标签 设置***/Legend legend = mBarChart.getLegend();//图例的形状，SQUARE为方块，LINE为线型legend.setForm(Legend.LegendForm.SQUARE);legend.setTextSize(11f);//显示位置legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//图例的垂直位置 正值向下移，负值向上移legend.setYOffset(0);//是否绘制在图表里面legend.setDrawInside(false);legend.setEnabled(isLegend);//不显示表边框mBarChart.setDrawBorders(false);
//        不显示右下角描述内容Description description = new Description();description.setEnabled(false);mBarChart.setDescription(description);}/** 饼图初始化*  isHole 是圆环还是实心* */public static void initPieChart(PieChart pc_collect, boolean isHole) {pc_collect.setUsePercentValues(true);pc_collect.getDescription().setEnabled(false);//设置整个饼图的偏移pc_collect.setExtraOffsets(0,10,5,5);pc_collect.setDragDecelerationEnabled(true);pc_collect.setDragDecelerationFrictionCoef(0.95f);//设置中间文字
//        pc_collect.setCenterText(generateCenterSpannableText());//中间圆心显示与否以及颜色，默认truepc_collect.setDrawHoleEnabled(isHole);pc_collect.setHoleColor(Color.WHITE);//半透明圆环的颜色和透明度pc_collect.setTransparentCircleColor(Color.WHITE);pc_collect.setTransparentCircleAlpha(110);//设置中间圆心，如果setTransparentCircleRadius的值比setHoleRadius小，只显示一套圆环
//        pc_collect.setHoleRadius(58f);//内圆环的半径pc_collect.setTransparentCircleRadius(41f);//是否显示中间文字，默认是truepc_collect.setDrawCenterText(false);//旋转角度pc_collect.setRotationAngle(0);//触摸旋转pc_collect.setRotationEnabled(false);//点击放大pc_collect.setHighlightPerTapEnabled(true);//数据pc_collect.setNoDataText("暂无数据");pc_collect.animateY(1400, Easing.EasingOption.EaseInOutQuad);//图表的标注，默认在最下方横排显示，此设置在右上角竖排显示Legend l = pc_collect.getLegend();l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);l.setOrientation(Legend.LegendOrientation.VERTICAL);l.setDrawInside(false);l.setXEntrySpace(7f);l.setYEntrySpace(0f);l.setYOffset(0f);//输入标签样式pc_collect.setEntryLabelColor(Color.WHITE);pc_collect.setEntryLabelTextSize(12f);}/**  饼图数据* */public static void setPieData(List<PieEntry> entries, PieChart pieChart) {PieDataSet dataSet = new PieDataSet(entries,"");//设置圆环之间的距离dataSet.setSliceSpace(3f);dataSet.setSelectionShift(5f);//数据和颜色List<Integer> colors = new ArrayList<>();//5个for循环都可以用，每组颜色都不同
//        for (int c : ColorTemplate.VORDIPLOM_COLORS) {
//            colors.add(c);
//        }//        for (int c : ColorTemplate.JOYFUL_COLORS) {
//            colors.add(c);
//        }
//for (int c : ColorTemplate.COLORFUL_COLORS) {colors.add(c);}//        for (int c : ColorTemplate.LIBERTY_COLORS) {
//            colors.add(c);
//        }
//for (int c : ColorTemplate.PASTEL_COLORS) {colors.add(c);}
//
//        //每个圆环的颜色一样，都是蓝色
//        colors.add(ColorTemplate.getHoloBlue());dataSet.setColors(colors);PieData data = new PieData(dataSet);data.setValueFormatter(new PercentFormatter());data.setValueTextSize(11f);data.setValueTextColor(Color.WHITE);pieChart.setData(data);pieChart.highlightValue(null);pieChart.invalidate();}
}

数据示例：

{"code":200,"message":"成功","data":{"dataBL":[{"officeCount":2,"type":"旅游饭店"},{"officeCount":2,"type":"学校食堂"},{"officeCount":1,"type":"自助餐"},{"officeCount":3,"type":"中餐厅"}],"data":[{"id":"71aeb0c9fc1b439a8edcf6814c1e2fb0","valueInspect":0,"name":"内蒙古自治区","value":80},{"id":"c561f4c64f1f41d2896fea76d06d377f","valueInspect":3,"name":"吉林省","value":1223},{"id":"9c05558f83c24cc79201b6f5e1035d3b","valueInspect":7,"name":"山东省","value":1995},{"id":"642ef984602a4f03b2403f4a6c769353","valueInspect":1,"name":"河北省","value":3}]}}

实际效果：

6. BarChart赋值的工具类：

private void showBarChart(List<String> xValues, LinkedHashMap<String,List<Integer>> chartDatas,List<Integer> colors) {List<IBarDataSet> barDataSets = new ArrayList<>();int currentPosition = 0;for (LinkedHashMap.Entry<String,List<Integer>> entry:chartDatas.entrySet()) {String name = entry.getKey();List<Integer> yValuesList = entry.getValue();List<BarEntry> entries = new ArrayList<>();for (int i=0;i<yValuesList.size();i++) {entries.add(new BarEntry(i,yValuesList.get(i)));}BarDataSet barDataSet = new BarDataSet(entries,name);barDataSet.setColor(colors.get(currentPosition));barDataSets.add(barDataSet);currentPosition++;}//X轴自定义值XAxis xAxis = bc_collect.getXAxis();//X轴自定义值xAxis.setValueFormatter(new IAxisValueFormatter() {@Overridepublic String getFormattedValue(float value, AxisBase axis) {if (value < 0) {return "";}//String labelValue = collectDataList.get((int) value % collectDataList.size()).getName();String labelValue = xValues.get((int) value % xValues.size());if (labelValue.length() > 4) {labelValue = labelValue.substring(0,4)+"…";}return labelValue;}});BarData barData = new BarData(barDataSets);float groupSpace = 0.3f; //柱状图组之间的间距int num = chartDatas.size();float barSpace = 0f;float barWidth = (1f-0.3f)/num;barData.setBarWidth(barWidth);barData.groupBars(0f, groupSpace, barSpace);bc_collect.setData(barData);}

7. 调用：先把获取到的数据值转换成showBarChart的三个参数：

private void convertData(List<CollectData> collectDataList) {LinkedHashMap<String, List<Integer>> chartDataMap = new LinkedHashMap<>();//两组柱状图的值List<Integer> yValues1 = new ArrayList<>();List<Integer> yValues2 = new ArrayList<>();//柱状图的X轴的值List<String> xValues = new ArrayList<>();for (int i=0;i<collectDataList.size();i++) {CollectData bean = collectDataList.get(i);xValues.add(bean.getName());yValues1.add(bean.getValue());yValues2.add(bean.getValueInspect());}chartDataMap.put("单位总数",yValues1);chartDataMap.put("已检查单位数",yValues2);List<Integer> colors = Arrays.asList(getResources().getColor(R.color.realplayer_blue),getResources().getColor(R.color.color_expire));showBarChart(xValues, chartDataMap, colors);}

与4中的setBarChartData(bc_collect);一样的效果。

MPAndroidChart使用详解－－BarChart和PieChart相关推荐

MPAndroidChart—— pieChart 属性详解
MPAndroidChart GitHub 地址:https://github.com/PhilJay/MPAndroidChart pieChart 常用属性详解: [java] view plai ...
Java使用Poi实现导出Word段落以及表格，XWPFParagraph和XWPFRun详解，生成目录,生成折线图、柱状图、饼状图
导出段落 public void exportSummarizeWord(HttpServletResponse response, Integer id) {Summarize summarize ...
Python零基础速成班-第14讲-Python处理Excel和Word，使用openpyxl和docx包详解，图表入门
Python零基础速成班-第14讲-Python处理Excel和Word,使用openpyxl和docx包详解,图表入门学习目标 Python处理Excel(使用openpyxl包).图表入门\ P ...
python画图三维-对python mayavi三维绘图的实现详解
网上下载mayavi的官方帮助文档,里面有很多例子,下面的记录都是查看手册后得到的. python的mayavi.mlab库中的绘图函数有很多候选参数,但下文记录并没有过多讨论,本人也是需要用到才查看 ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
【Dash搭建可视化网站】项目10：疫情数据可视化大屏制作步骤详解
疫情数据可视化大屏制作步骤详解 1 项目效果图 2 项目架构 3 文件介绍和功能完善 3.1 assets文件夹介绍 3.2 app.py和index.py文件完善 3.3 header.py文件完善 ...
【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
MPAndroidChart的详细使用——BarChart条形图（一）
今天来记录一下BarChart(条形图)的简单使用! 注:本人使用的版本是MPAndroidChart-v3.0.3(如若版本不同有某些方法更新,可在评论区留言,尽我所能帮你解决!) MPAndroi ...
【Dash搭建可视化网站】项目12：全球恐怖主义数据大屏制作步骤详解
全球恐怖主义数据大屏制作步骤详解 1 项目效果图 2 项目架构 3 文件介绍和功能完善 3.1 assets文件夹介绍 3.2 app.py和index.py文件完善 3.3 header.py文件完 ...

MPAndroidChart使用详解－－BarChart和PieChart

MPAndroidChart使用详解－－BarChart和PieChart相关推荐

最新文章

热门文章