当前位置:   article > 正文

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

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. Toast
  31. .makeText(getApplicationContext(),pieEntry.getLabel(),Toast.LENGTH_SHORT)
  32. .show();
  33. }
  34. /**未中饼状图区域**/
  35. @Override
  36. public void onNothingSelected() {
  37. Log.e("*************", "关闭");
  38. }
  39. });
  40. // 数据
  41. ArrayList<PieEntry> pieEnters = new ArrayList();
  42. pieEnters.add(new PieEntry(46f,"华为"));
  43. pieEnters.add(new PieEntry(20f,"小米"));
  44. pieEnters.add(new PieEntry(30f,"OPPO"));
  45. pieEnters.add(new PieEntry(4f,"苹果"));
  46. PieDataSet dataSet = new PieDataSet(pieEnters,"");
  47. // 颜色
  48. ArrayList<Integer> colors = new ArrayList();
  49. colors.add(Color.RED);
  50. colors.add(Color.GREEN);
  51. colors.add(Color.BLUE);
  52. colors.add(Color.YELLOW);
  53. // 设置颜色值
  54. dataSet.setColors(colors);
  55. //数据连接线距图形片内部边界的距离,为百分数
  56. dataSet.setValueLinePart1OffsetPercentage(80f);
  57. //设置线的长度
  58. dataSet.setValueLinePart1Length(0.9f);
  59. dataSet.setValueLinePart2Length(0.9f);
  60. // 设置线的颜色
  61. dataSet.setValueLineColor(Color.BLACK);
  62. //设置文字和数据图外显示
  63. dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
  64. dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
  65. /**设置图例**/
  66. Legend legend = ma_pieChart.getLegend();
  67. legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
  68. legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
  69. legend.setOrientation(Legend.LegendOrientation.VERTICAL);
  70. legend.setDrawInside(false);
  71. legend.setXEntrySpace(7f);
  72. legend.setYEntrySpace(0f);
  73. legend.setYOffset(0f);
  74. /**设置数据**/
  75. PieData pieData = new PieData(dataSet);
  76. pieData.setDrawValues(true);
  77. pieData.setValueFormatter(new PercentFormatter());//显示百分比
  78. pieData.setValueTextColor(Color.BLACK);// 百分比字体颜色
  79. pieData.setValueTextSize(12f);// 百分比字体大小
  80. ma_pieChart.setData(pieData);
  81. ma_pieChart.animateX(1400,Easing.EasingOption.EaseInOutQuad);//X轴动画
  82. // ma_pieChart.animateY(1400,Easing.EasingOption.EaseInOutQuad);//Y轴动画
  83. ma_pieChart.invalidate();
  84. }

柱状图

柱状图示例:

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

折线图

折线图示例:

布局文件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. * Entry 坐标点对象 构造函数 第一个参数为x点坐标 第二个为y点
  26. */
  27. ArrayList<Entry> values1 = new ArrayList<>();
  28. ArrayList<Entry> values2 = new ArrayList<>();
  29. values1.add(new Entry(4,10));
  30. values1.add(new Entry(6,15));
  31. values1.add(new Entry(9,20));
  32. values1.add(new Entry(12,5));
  33. values1.add(new Entry(15,30));
  34. values2.add(new Entry(3,110));
  35. values2.add(new Entry(6,115));
  36. values2.add(new Entry(9,130));
  37. values2.add(new Entry(12,85));
  38. values2.add(new Entry(15,90));
  39. //LineDataSet每一个对象就是一条连接线
  40. LineDataSet set1;
  41. LineDataSet set2;
  42. //判断图表中原来是否有数据
  43. if (ma_lineChart.getData() != null &&
  44. ma_lineChart.getData().getDataSetCount() > 0) {
  45. //获取数据1
  46. set1 = (LineDataSet) ma_lineChart.getData().getDataSetByIndex(0);
  47. set1.setValues(values1);
  48. set2= (LineDataSet) ma_lineChart.getData().getDataSetByIndex(1);
  49. set2.setValues(values2);
  50. //刷新数据
  51. ma_lineChart.getData().notifyDataChanged();
  52. ma_lineChart.notifyDataSetChanged();
  53. } else {
  54. //设置数据1 参数1:数据源 参数2:图例名称
  55. set1 = new LineDataSet(values1,"测试数据1");
  56. set1.setColor(Color.BLACK);
  57. set1.setCircleColor(Color.BLACK);
  58. set1.setLineWidth(1f);//设置线宽
  59. set1.setCircleRadius(3f);//设置焦点圆心的大小
  60. set1.enableDashedHighlightLine(10f,5f,0f);//点击后的高亮线的显示样式
  61. set1.setHighlightLineWidth(2f);//设置点击交点后显示高亮线宽
  62. set1.setHighlightEnabled(true);//是否禁用点击高亮线
  63. set1.setHighLightColor(Color.RED);//设置点击交点后显示交高亮线的颜色
  64. set1.setValueTextSize(9f);//设置显示值的文字大小
  65. set1.setDrawFilled(false);//设置禁用范围背景填充
  66. //格式化显示数据
  67. final DecimalFormat mFormat = new DecimalFormat("###,###,##0");
  68. set1.setValueFormatter(new IValueFormatter() {
  69. @Override
  70. public String getFormattedValue(float value,Entry entry,int dataSetIndex,ViewPortHandler viewPortHandler) {
  71. return mFormat.format(value);
  72. }
  73. });
  74. if (Utils.getSDKInt() >= 18) {
  75. set1.setFillAlpha(Color.argb(1,255,0,0));//设置范围背景填充
  76. } else {
  77. set1.setFillColor(Color.BLACK);
  78. }
  79. //设置数据2
  80. set2 = new LineDataSet(values2,"测试数据2");
  81. set2.setColor(Color.GRAY);
  82. set2.setCircleColor(Color.GRAY);
  83. set2.setLineWidth(1f);
  84. set2.setCircleRadius(3f);
  85. set2.setValueTextSize(10f);
  86. //保存LineDataSet集合
  87. ArrayList<ILineDataSet> dataSets = new ArrayList<>();
  88. dataSets.add(set1); // add the datasets
  89. dataSets.add(set2);
  90. //创建LineData对象 属于LineChart折线图的数据集合
  91. LineData data = new LineData(dataSets);
  92. // 添加到图表中
  93. ma_lineChart.setData(data);
  94. //ma_lineChart.animateX(1400,Easing.EasingOption.EaseInOutSine);// y轴动画
  95. ma_lineChart.animateY(1400,Easing.EasingOption.EaseInOutSine);// y轴动画
  96. //绘制图表
  97. ma_lineChart.invalidate();
  98. }
  99. }

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

闽ICP备14008679号