devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

MPAndroidChart 绘制 饼状图、柱状图和折线图简单汇总_mpandroidchart 各种类型饼状图 tobarchart

作者：IT小白 | 2024-03-17 07:03:09

赞

踩

mpandroidchart 各种类型饼状图 tobarchart

首先导入依赖：

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

或者百度网盘链接：

链接：https://pan.baidu.com/s/1SnbTGz8DQ8-y0ha27vHs5g 
提取码：banm

饼状图 

饼状图示例：

 

布局文件xml：

  1.         <!--饼状图-->
  2.         <com.github.mikephil.charting.charts.PieChart
  3.             android:id="@+id/ma_pieChart"
  4.             android:layout_width="match_parent"
  5.             android:layout_height="200dp"/>

java代码：

  1. /**
  2.      * 饼状图
  3.      */
  4.     private void initPieChart() {
  5.         ma_pieChart = findViewById(R.id.ma_pieChart);
  6.         //创建描述信息
  7.         Description desc = new Description();
  8.         desc.setPosition(150,100);
  9.         desc.setTextSize(12);
  10.         desc.setTextColor(Color.RED);
  11.         desc.setText("饼状图");
  12.         // 饼状图设置 
  13.         ma_pieChart.setDescription(desc);
  14.         ma_pieChart.setExtraOffsets(50, 50, 50, 20);//设置pieChart图表上下左右的偏移，类似于外边距
  15.         ma_pieChart.setHoleRadius(0f);//空心半径
  16.         ma_pieChart.setTransparentCircleRadius(0f);//设置PieChart内部透明圆的半径(这里设置0f
  17.         ma_pieChart.setDragDecelerationFrictionCoef(0.95f);//设置pieChart图表转动阻力摩擦系数[0,1]
  18.         ma_pieChart.setRotationAngle(0);//设置pieChart图表起始角度
  19.         ma_pieChart.setHighlightPerTapEnabled(true);//设置piecahrt图表点击Item高亮是否可用
  20.         ma_pieChart.setEntryLabelColor(Color.BLACK);//字体颜色
  21.         ma_pieChart.setRotationEnabled(false);// 设置pieChart图表是否可以手动旋转
  22.         // 饼状图触摸监听事件
  23.         ma_pieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
  24.             /**选中饼状图区域**/
  25.             @Override
  26.             public void onValueSelected(Entry e,Highlight h) {
  27.                 Log.e("*************", "开启");
  28.                 // 转换对象
  29.                 PieEntry pieEntry = (PieEntry) e;
  30.                 
  31.                Toast
  32.               .makeText(getApplicationContext(),pieEntry.getLabel(),Toast.LENGTH_SHORT)
  33.               .show();
  34.  
  35.             }
  36.             /**未中饼状图区域**/
  37.             @Override
  38.             public void onNothingSelected() {
  39.                 Log.e("*************", "关闭");
  40.             }
  41.         });
  42.  
  43.  
  44.         // 数据
  45.         ArrayList<PieEntry> pieEnters = new ArrayList();
  46.         pieEnters.add(new PieEntry(46f,"华为"));
  47.         pieEnters.add(new PieEntry(20f,"小米"));
  48.         pieEnters.add(new PieEntry(30f,"OPPO"));
  49.         pieEnters.add(new PieEntry(4f,"苹果"));
  50.  
  51.         PieDataSet dataSet = new PieDataSet(pieEnters,"");
  52.         // 颜色
  53.         ArrayList<Integer> colors = new ArrayList();
  54.         colors.add(Color.RED);
  55.         colors.add(Color.GREEN);
  56.         colors.add(Color.BLUE);
  57.         colors.add(Color.YELLOW);
  58.         // 设置颜色值
  59.         dataSet.setColors(colors);
  60.         //数据连接线距图形片内部边界的距离，为百分数
  61.         dataSet.setValueLinePart1OffsetPercentage(80f);
  62.         //设置线的长度
  63.         dataSet.setValueLinePart1Length(0.9f);
  64.         dataSet.setValueLinePart2Length(0.9f);
  65.         // 设置线的颜色
  66.         dataSet.setValueLineColor(Color.BLACK);
  67.         //设置文字和数据图外显示
  68.         dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
  69.         dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
  70.  
  71.         /**设置图例**/
  72.         Legend legend = ma_pieChart.getLegend();
  73.         legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
  74.         legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
  75.         legend.setOrientation(Legend.LegendOrientation.VERTICAL);
  76.         legend.setDrawInside(false);
  77.         legend.setXEntrySpace(7f);
  78.         legend.setYEntrySpace(0f);
  79.         legend.setYOffset(0f);
  80.  
  81.         /**设置数据**/
  82.         PieData pieData = new PieData(dataSet);
  83.         pieData.setDrawValues(true);
  84.         pieData.setValueFormatter(new PercentFormatter());//显示百分比
  85.         pieData.setValueTextColor(Color.BLACK);// 百分比字体颜色
  86.         pieData.setValueTextSize(12f);// 百分比字体大小
  87.         ma_pieChart.setData(pieData);
  88.  
  89.         ma_pieChart.animateX(1400,Easing.EasingOption.EaseInOutQuad);//X轴动画
  90.     //    ma_pieChart.animateY(1400,Easing.EasingOption.EaseInOutQuad);//Y轴动画
  91.  
  92.         ma_pieChart.invalidate();
  93.     }

柱状图

柱状图示例：

布局文件xml：

  1.         <!--柱状图-->
  2.         <com.github.mikephil.charting.charts.BarChart
  3.             android:id="@+id/ma_barChart"
  4.             android:layout_width="match_parent"
  5.             android:layout_height="200dp"/>

 java代码：

  1. /**
  2.      * 柱状图
  3.      */
  4.     private void initBarChart() {
  5.         ma_barChart = findViewById(R.id.ma_barChart);
  6.         ma_barChart.getDescription().setEnabled(false); // 不显示描述
  7.         ma_barChart.setExtraOffsets(20,20,20,20); // 设置饼图的偏移量，类似于内边距 ，设置视图窗口大小
  8.         ma_barChart.setDragEnabled(false);// 是否可以拖拽
  9.         ma_barChart.setScaleEnabled(false);//是否可放大
  10.         ma_barChart.setDrawGridBackground(false);//是否绘制网格线
  11.  
  12.         /**设置坐标轴**/
  13.         // 设置x轴
  14.         XAxis xAxis = ma_barChart.getXAxis();
  15.         xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);  // 设置x轴显示在下方，默认在上方
  16.         xAxis.setDrawGridLines(false); // 将此设置为true，绘制该轴的网格线。
  17.         xAxis.setLabelCount(5);  // 设置x轴上的标签个数
  18.         xAxis.setTextSize(15f); // x轴上标签的大小
  19.         final String labelName[] = {"周一","周二","周三","周四","周五"};
  20.         // 设置x轴显示的值的格式
  21.         xAxis.setValueFormatter(new IAxisValueFormatter() {
  22.             @Override
  23.             public String getFormattedValue(float value,AxisBase axis) {
  24.                 if ((int) value < labelName.length) {
  25.                     return labelName[(int) value];
  26.                 } else {
  27.                     return "";
  28.                 }
  29.             }
  30.         });
  31.         xAxis.setYOffset(15); // 设置标签对x轴的偏移量，垂直方向
  32.         //ma_barChart.animateX(1400,Easing.EasingOption.EaseInSine);// X轴动画
  33.  
  34.         // 设置y轴，y轴有两条，分别为左和右
  35.         YAxis yAxis_right = ma_barChart.getAxisRight();
  36.         yAxis_right.setAxisMaximum(1200f);  // 设置y轴的最大值
  37.         yAxis_right.setAxisMinimum(0f);  // 设置y轴的最小值
  38.         yAxis_right.setEnabled(false);  // 不显示右边的y轴
  39.  
  40.         YAxis yAxis_left = ma_barChart.getAxisLeft();
  41.         yAxis_left.setAxisMaximum(1200f);
  42.         yAxis_left.setAxisMinimum(0f);
  43.         yAxis_left.setTextSize(15f); // 设置y轴的标签大小
  44.         ma_barChart.animateY(1400,Easing.EasingOption.EaseInSine);// y轴动画
  45.  
  46.         /**设置图例**/
  47.         Legend legend = ma_barChart.getLegend();
  48.         legend.setFormSize(12f); // 图例的图形大小
  49.         legend.setTextSize(15f); // 图例的文字大小
  50.         legend.setDrawInside(true); // 设置图例在图中
  51.         legend.setOrientation(Legend.LegendOrientation.VERTICAL); // 图例的方向为垂直
  52.         legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT); //显示位置，水平右对齐
  53.         legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); // 显示位置，垂直上对齐
  54.         // 设置水平与垂直方向的偏移量
  55.         legend.setYOffset(10f);
  56.         legend.setXOffset(10f);
  57.         /**设置数据**/
  58.         List<IBarDataSet> sets = new ArrayList<>();
  59.         // 此处有两个DataSet，所以有两条柱子，BarEntry（）中的x和y分别表示显示的位置和高度
  60.         // x是横坐标，表示位置，y是纵坐标，表示高度
  61.         List<BarEntry> barEntries1 = new ArrayList<>();
  62.         barEntries1.add(new BarEntry(0, 390f));
  63.         barEntries1.add(new BarEntry(1, 1100f));
  64.         barEntries1.add(new BarEntry(2, 900f));
  65.         barEntries1.add(new BarEntry(3, 700f));
  66.         barEntries1.add(new BarEntry(4, 300f));
  67.         BarDataSet barDataSet1 = new BarDataSet(barEntries1, "");
  68.         barDataSet1.setValueTextColor(Color.RED); // 值的颜色
  69.         barDataSet1.setValueTextSize(15f); // 值的大小
  70.         barDataSet1.setColor(Color.parseColor("#1AE61A")); // 柱子的颜色
  71.         barDataSet1.setLabel("蔬菜"); // 设置标签之后，图例的内容默认会以设置的标签显示
  72.         // 设置柱子上数据显示的格式
  73.         barDataSet1.setValueFormatter(new IValueFormatter() {
  74.             @Override
  75.             public String getFormattedValue(float value,Entry entry,int dataSetIndex,ViewPortHandler viewPortHandler) {
  76.                 // 此处的value默认保存一位小数
  77.                 return value + "斤";
  78.             }
  79.         });
  80.  
  81.         sets.add(barDataSet1);
  82.  
  83.         List<BarEntry> barEntries2 = new ArrayList<>();
  84.         barEntries2.add(new BarEntry(0, 210f));
  85.         barEntries2.add(new BarEntry(1, 450f));
  86.         barEntries2.add(new BarEntry(2, 430f));
  87.         barEntries2.add(new BarEntry(3, 440f));
  88.         barEntries2.add(new BarEntry(4, 180f));
  89.         BarDataSet barDataSet2 = new BarDataSet(barEntries2, "");
  90.         // 不显示第二根柱子上的值
  91.         barDataSet2.setDrawValues(false); // 不显示值
  92.         barDataSet2.setColor(Color.parseColor("#F7F709"));
  93.         barDataSet2.setLabel("水果");
  94.         sets.add(barDataSet2);
  95.  
  96.         BarData barData = new BarData(sets);
  97.         barData.setBarWidth(0.4f); // 设置柱子的宽度
  98.         ma_barChart.setData(barData);
  99.  
  100.     }

折线图

折线图示例：

布局文件xml：

  1.         <!--折线图-->
  2.         <com.github.mikephil.charting.charts.LineChart
  3.             android:id="@+id/ma_lineChart"
  4.             android:layout_width="match_parent"
  5.             android:layout_height="200dp"/>

java代码：

  1. /**
  2.      * 折线图
  3.      * */
  4.     private void initLineChart(){
  5.         ma_lineChart = findViewById(R.id.ma_lineChart);
  6.         //X轴所在位置   默认为上面
  7.         ma_lineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
  8.         //隐藏右边的Y轴
  9.         ma_lineChart.getAxisRight().setEnabled(false);
  10.         //创建描述信息
  11.         Description description =new Description();
  12.         description.setPosition(1000,100);
  13.         description.setText("测试图表");
  14.         description.setTextColor(Color.RED);
  15.         description.setTextSize(12);
  16.         ma_lineChart.setDescription(description);//设置图表描述信息
  17.         ma_lineChart.setNoDataText("没有数据熬");//没有数据时显示的文字
  18.         ma_lineChart.setNoDataTextColor(Color.BLUE);//没有数据时显示文字的颜色
  19.         ma_lineChart.setDrawGridBackground(false);//chart 绘图区后面的背景矩形将绘制
  20.         ma_lineChart.setDrawBorders(false);//禁止绘制图表边框的线
  21.         //ma_lineChart.setBorderColor(); //设置 chart 边框线的颜色。
  22.         //ma_lineChart.setBorderWidth(); //设置 chart 边界线的宽度，单位 dp。
  23.         //ma_lineChart.setLogEnabled(true);//打印日志
  24.  
  25.         /**
  26.          * Entry 坐标点对象  构造函数 第一个参数为x点坐标 第二个为y点
  27.          */
  28.         ArrayList<Entry> values1 = new ArrayList<>();
  29.         ArrayList<Entry> values2 = new ArrayList<>();
  30.  
  31.         values1.add(new Entry(4,10));
  32.         values1.add(new Entry(6,15));
  33.         values1.add(new Entry(9,20));
  34.         values1.add(new Entry(12,5));
  35.         values1.add(new Entry(15,30));
  36.  
  37.         values2.add(new Entry(3,110));
  38.         values2.add(new Entry(6,115));
  39.         values2.add(new Entry(9,130));
  40.         values2.add(new Entry(12,85));
  41.         values2.add(new Entry(15,90));
  42.  
  43.         //LineDataSet每一个对象就是一条连接线
  44.         LineDataSet set1;
  45.         LineDataSet set2;
  46.  
  47.         //判断图表中原来是否有数据
  48.         if (ma_lineChart.getData() != null &&
  49.                 ma_lineChart.getData().getDataSetCount() > 0) {
  50.             //获取数据1
  51.             set1 = (LineDataSet) ma_lineChart.getData().getDataSetByIndex(0);
  52.             set1.setValues(values1);
  53.             set2= (LineDataSet) ma_lineChart.getData().getDataSetByIndex(1);
  54.             set2.setValues(values2);
  55.             //刷新数据
  56.             ma_lineChart.getData().notifyDataChanged();
  57.             ma_lineChart.notifyDataSetChanged();
  58.         } else {
  59.             //设置数据1  参数1：数据源 参数2：图例名称
  60.             set1 = new LineDataSet(values1,"测试数据1");
  61.             set1.setColor(Color.BLACK);
  62.             set1.setCircleColor(Color.BLACK);
  63.             set1.setLineWidth(1f);//设置线宽
  64.             set1.setCircleRadius(3f);//设置焦点圆心的大小
  65.             set1.enableDashedHighlightLine(10f,5f,0f);//点击后的高亮线的显示样式
  66.             set1.setHighlightLineWidth(2f);//设置点击交点后显示高亮线宽
  67.             set1.setHighlightEnabled(true);//是否禁用点击高亮线
  68.             set1.setHighLightColor(Color.RED);//设置点击交点后显示交高亮线的颜色
  69.             set1.setValueTextSize(9f);//设置显示值的文字大小
  70.             set1.setDrawFilled(false);//设置禁用范围背景填充
  71.  
  72.             //格式化显示数据
  73.             final DecimalFormat mFormat = new DecimalFormat("###,###,##0");
  74.             set1.setValueFormatter(new IValueFormatter() {
  75.                 @Override
  76.                 public String getFormattedValue(float value,Entry entry,int dataSetIndex,ViewPortHandler viewPortHandler) {
  77.                     return mFormat.format(value);
  78.                 }
  79.             });
  80.             if (Utils.getSDKInt() >= 18) {
  81.                 set1.setFillAlpha(Color.argb(1,255,0,0));//设置范围背景填充
  82.             } else {
  83.                 set1.setFillColor(Color.BLACK);
  84.             }
  85.  
  86.             //设置数据2
  87.             set2 = new LineDataSet(values2,"测试数据2");
  88.             set2.setColor(Color.GRAY);
  89.             set2.setCircleColor(Color.GRAY);
  90.             set2.setLineWidth(1f);
  91.             set2.setCircleRadius(3f);
  92.             set2.setValueTextSize(10f);
  93.  
  94.             //保存LineDataSet集合
  95.             ArrayList<ILineDataSet> dataSets = new ArrayList<>();
  96.             dataSets.add(set1); // add the datasets
  97.             dataSets.add(set2);
  98.             //创建LineData对象 属于LineChart折线图的数据集合
  99.             LineData data = new LineData(dataSets);
  100.             // 添加到图表中
  101.             ma_lineChart.setData(data);
  102.             //ma_lineChart.animateX(1400,Easing.EasingOption.EaseInOutSine);// y轴动画
  103.             ma_lineChart.animateY(1400,Easing.EasingOption.EaseInOutSine);// y轴动画
  104.             //绘制图表
  105.             ma_lineChart.invalidate();
  106.  
  107.         }
  108.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/254727
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号