MPAndroidChart BarChart使用

Labradors_
4,352 阅读5分钟
原文链接： mp.weixin.qq.com

继上次的LineChart，本篇文章记录柱状图BarChart的使用，原理与LineChart没什么区别，都是定义左右YAxis和上下的XAxis，然后设置Labels，最后填充数据就ok。先看看效果图

使用

  • XML布局 

  1. <com.github.mikephil.charting.charts.BarChart
  2.         android:id="@+id/chart1"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="match_parent"
  5.        />

  • 定义BarChart管理器 

  1. /**
  2.  * @author Administrator
  3.  * @version 1.0
  4.  * @description class description
  5.  * @date 2018/1/2
  6.  */
  8. public class BarChartManager {
  9.   private BarChart mBarChart;
  10.   private YAxis leftAxis;
  11.   private YAxis rightAxis;
  12.   private XAxis xAxis;
  14.   public BarChartManager(BarChart barChart) {
  15.     this.mBarChart = barChart;
  16.     leftAxis = mBarChart.getAxisLeft();
  17.     rightAxis = mBarChart.getAxisRight();
  18.     xAxis = mBarChart.getXAxis();
  19.   }
  21.   /**/
  22.   private void initLineChart() {
  23.     mBarChart.setDrawValueAboveBar(false);
  24.     mBarChart.getDescription().setEnabled(false);
  25.     //背景颜色
  26.     //mBarChart.setBackground(SupportApp.drawable(R.drawable.shape_out_in));
  27.     //网格
  28.     mBarChart.setDrawGridBackground(false);
  29.     //背景阴影
  30.     mBarChart.setDrawBarShadow(false);
  31.     mBarChart.setHighlightFullBarEnabled(false);
  32.     //显示边界
  33.     mBarChart.setDrawBorders(false);
  34.     mBarChart.setPadding(1, 1, 1, 1);
  35.     //设置动画效果
  36.     mBarChart.animateY(1000, Easing.EasingOption.Linear);
  37.     mBarChart.animateX(1000, Easing.EasingOption.Linear);
  38.     mBarChart.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
  39.     mBarChart.setOnTouchListener(null);
  40.     //折线图例 标签 设置
  41.     Legend legend = mBarChart.getLegend();
  42.     legend.setForm(Legend.LegendForm.CIRCLE);
  43.     legend.setTextSize(11f);
  44.     legend.setTextColor(Color.WHITE);
  45.     //显示位置
  46.     legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
  47.     legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
  48.     legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
  49.     legend.setDrawInside(false);
  50.     legend.setXEntrySpace(32);
  51.     legend.setTextSize(12);
  52.     //XY轴的设置
  53.     //X轴设置显示位置在底部
  54.     rightAxis.setEnabled(false);
  55.     xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  56.     xAxis.setTextSize(10);
  57.     xAxis.setTextColor(Color.WHITE);
  58.     xAxis.setAxisMinimum(0f);
  59.     leftAxis.setAxisMinimum(0f);
  60.     leftAxis.setTextSize(12);
  61.     leftAxis.setTextColor(Color.WHITE);
  62.     xAxis.setGranularityEnabled(true);
  63.     xAxis.setGranularity(0.9f);
  64.     xAxis.setCenterAxisLabels(true);
  65.     mBarChart.notifyDataSetChanged();
  66.   }
  68.   /**
  69.    * 展示柱状图(一条)
  70.    */
  71.   public void showBarChart(List<Float> xAxisValues, List<Float> yAxisValues, String label,
  72.       int color) {
  73.     initLineChart();
  74.     ArrayList<BarEntry> entries = new ArrayList<>();
  75.     for (int i = 0; i < yAxisValues.size(); i++) {
  76.       entries.add(new BarEntry(xAxisValues.get(i), yAxisValues.get(i)));
  77.     }
  78.     // 每一个BarDataSet代表一类柱状图
  79.     BarDataSet barDataSet = new BarDataSet(entries, label);
  80.     barDataSet.setColor(color);
  81.     barDataSet.setValueTextSize(9f);
  82.     barDataSet.setFormLineWidth(1f);
  83.     barDataSet.setFormSize(15.f);
  84.     barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
  85.     BarData data = new BarData(barDataSet);
  86.     data.setDrawValues(false);
  87.     data.setBarWidth(0.5f);
  88.     data.setValueTextColor(SupportApp.color(R.color.white));
  89.     //设置X轴的刻度数
  90.     xAxis.setLabelCount(xAxisValues.size() - 1, false);
  91.     mBarChart.setData(data);
  92.     mBarChart.invalidate();
  93.   }
  95.   /**
  96.    * 展示柱状图(多条)
  97.    */
  98.   public void showBarChart(List<Float> xAxisValues, List<List<Float>> yAxisValues,
  99.       List<String> labels, List<Integer> colours) {
  100.     initLineChart();
  101.     BarData data = new BarData();
  102.     for (int i = 0; i < yAxisValues.size(); i++) {
  103.       ArrayList<BarEntry> entries = new ArrayList<>();
  104.       for (int j = 0; j < yAxisValues.get(i).size(); j++) {
  106.         entries.add(new BarEntry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
  107.       }
  108.       BarDataSet barDataSet = new BarDataSet(entries, labels.get(i));
  109.       barDataSet.setColor(colours.get(i));
  110.       barDataSet.setValueTextColor(colours.get(i));
  111.       barDataSet.setValueTextSize(10f);
  112.       barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
  113.       barDataSet.setDrawValues(false);
  114.       data.addDataSet(barDataSet);
  115.     }
  116.     int amount = yAxisValues.size();
  117.     float groupSpace = 0.5f; //柱状图组之间的间距
  118.     float barSpace = (float) ((1 - 0.12) / amount / 20); // x4 DataSet
  119.     float barWidth = (float) ((1 - 0.12) / amount / 10 * 4); // x4 DataSet
  121.     // (0.2 + 0.02) * 4 + 0.08 = 1.00 -> interval per "group"
  122.     xAxis.setLabelCount(xAxisValues.size() - 1, false);
  123.     List<String> values = Lists.newArrayList();
  124.     values.add("11-01");
  125.     values.add("11-02");
  126.     values.add("11-03");
  127.     values.add("11-04");
  128.     values.add("11-05");
  129.     values.add("11-06");
  130.     values.add("11-07");
  131.     xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  132.     xAxis.setValueFormatter(new YAxisValueFormatter(values));
  133.     data.setBarWidth(barWidth);
  134.     data.groupBars(0, groupSpace, barSpace);
  135.     mBarChart.notifyDataSetChanged();
  136.     mBarChart.setData(data);
  137.     mBarChart.invalidate();
  138.   }
  140.   /**
  141.    * 展示柱状图(多条)
  142.    */
  143.   public void showBarChart(List<Float> xAxisValues, List<List<Float>> yAxisValues,
  144.       List<String> labels, List<Integer> colours, List<String> values) {
  145.     initLineChart();
  146.     BarData data = new BarData();
  147.     for (int i = 0; i < yAxisValues.size(); i++) {
  148.       ArrayList<BarEntry> entries = new ArrayList<>();
  149.       for (int j = 0; j < yAxisValues.get(i).size(); j++) {
  150.         entries.add(new BarEntry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
  151.       }
  152.       BarDataSet barDataSet = new BarDataSet(entries, labels.get(i));
  153.       barDataSet.setColor(colours.get(i));
  154.       barDataSet.setValueTextColor(colours.get(i));
  155.       barDataSet.setValueTextSize(10f);
  156.       barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
  157.       barDataSet.setDrawValues(false);
  158.       data.addDataSet(barDataSet);
  159.     }
  160.     int amount = yAxisValues.size();
  161.     float groupSpace = 0.5f; //柱状图组之间的间距
  162.     float barSpace = (float) ((1 - 0.12) / amount / 20); // x4 DataSet
  163.     float barWidth = (float) ((1 - 0.12) / amount / 10 * 4); // x4 DataSet
  164.     xAxis.setLabelCount(xAxisValues.size() - 1, false);
  165.     xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  166.     xAxis.setValueFormatter(new YAxisValueFormatter(values));
  167.     data.setBarWidth(barWidth);
  168.     data.groupBars(0, groupSpace, barSpace);
  169.     mBarChart.notifyDataSetChanged();
  170.     mBarChart.setData(data);
  171.   }
  173.   /**
  174.    * 设置Y轴值
  175.    */
  176.   public void setYAxis(float max, float min, int labelCount) {
  177.     if (max < min) {
  178.       return;
  179.     }
  180.     leftAxis.setAxisMaximum(max);
  181.     leftAxis.setAxisMinimum(min);
  182.     leftAxis.setLabelCount(labelCount, false);
  184.     rightAxis.setAxisMaximum(max);
  185.     rightAxis.setAxisMinimum(min);
  186.     rightAxis.setLabelCount(labelCount, false);
  187.     mBarChart.invalidate();
  188.   }
  190.   /**
  191.    * 设置X轴的值
  192.    */
  193.   public void setXAxis(float max, float min, int labelCount) {
  194.     xAxis.setAxisMaximum(max);
  195.     xAxis.setAxisMinimum(min);
  196.     xAxis.setLabelCount(labelCount, false);
  198.     mBarChart.invalidate();
  199.   }
  201.   /**
  202.    * 设置高限制线
  203.    */
  204.   public void setHightLimitLine(float high, String name, int color) {
  205.     if (name == null) {
  206.       name = "高限制线";
  207.     }
  208.     LimitLine hightLimit = new LimitLine(high, name);
  209.     hightLimit.setLineWidth(4f);
  210.     hightLimit.setTextSize(10f);
  211.     hightLimit.setLineColor(color);
  212.     hightLimit.setTextColor(color);
  213.     leftAxis.addLimitLine(hightLimit);
  214.     mBarChart.invalidate();
  215.   }
  217.   /**
  218.    * 设置低限制线
  219.    */
  220.   public void setLowLimitLine(int low, String name) {
  221.     if (name == null) {
  222.       name = "低限制线";
  223.     }
  224.     LimitLine hightLimit = new LimitLine(low, name);
  225.     hightLimit.setLineWidth(4f);
  226.     hightLimit.setTextSize(10f);
  227.     leftAxis.addLimitLine(hightLimit);
  228.     mBarChart.invalidate();
  229.   }
  231.   /**
  232.    * 设置描述信息
  233.    */
  234.   public void setDescription(String str) {
  235.     Description description = new Description();
  236.     description.setText(str);
  237.     mBarChart.setDescription(description);
  238.     mBarChart.invalidate();
  239.   }
  241.   /**
  242.    * 展示柱状图(多条)
  243.    */
  244.   public void showBarChartPlan(List<Float> xAxisValues, List<List<Float>> yAxisValues,
  245.       List<String> labels, List<Integer> colours, List<String> values) {
  246.     initLineChart();
  247.     BarData data = new BarData();
  248.     for (int i = 0; i < yAxisValues.size(); i++) {
  249.       ArrayList<BarEntry> entries = new ArrayList<>();
  250.       for (int j = 0; j < yAxisValues.get(i).size(); j++) {
  251.         entries.add(new BarEntry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
  252.       }
  253.       BarDataSet barDataSet = new BarDataSet(entries, labels.get(i));
  254.       barDataSet.setColor(colours.get(i));
  255.       barDataSet.setValueTextColor(colours.get(i));
  256.       barDataSet.setValueTextSize(10f);
  257.       barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
  258.       barDataSet.setDrawValues(false);
  259.       data.addDataSet(barDataSet);
  260.     }
  261.     int amount = yAxisValues.size();
  262.     float groupSpace = 0.5f; //柱状图组之间的间距
  263.     float barSpace = (float) ((1 - 0.12) / amount / 20); // x4 DataSet
  264.     float barWidth = (float) ((1 - 0.12) / amount / 10 * 4); // x4 DataSet
  265.     xAxis.setLabelCount(xAxisValues.size() - 1, false);
  266.     xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  267.     xAxis.setValueFormatter(new YAxisValueFormatter(values));
  268.     xAxis.setXOffset(barSpace);
  269.     data.setBarWidth(barWidth);
  270.     data.groupBars(0, groupSpace, barSpace);
  271.     mBarChart.setDrawValueAboveBar(true);
  272.     mBarChart.notifyDataSetChanged();
  273.     mBarChart.setData(data);
  274.   }
  275. }

  • 填充数据 

  1. public void init(BarChart chart) {
  2.     mManager = new BarChartManager(chart);
  3.     for (int i = 0; i < 7; i++) {
  4.       xValues.add((float) i);
  5.     }
  6.     //设置y轴的数据()
  7.     List<List<Float>> yValues = new ArrayList<>();
  8.     for (int i = 0; i < 4; i++) {
  9.       List<Float> yValue = new ArrayList<>();
  10.       for (int j = 0; j < 7; j++) {
  11.         yValue.add((float) (Math.random() * 8000));
  12.       }
  13.       yValues.add(yValue);
  14.     }
  15.     //颜色集合
  16.     colours.add(SupportApp.color(R.color.color_bar_one));
  17.     colours.add(SupportApp.color(R.color.color_bar_three));
  18.     colours.add(SupportApp.color(R.color.color_bar_four));
  19.     colours.add(SupportApp.color(R.color.color_bar_two));
  20.     //线的名字集合
  21.     List<String> names = new ArrayList<>();
  22.     names.add("米");
  23.     names.add("面");
  24.     names.add("粮");
  25.     names.add("油");
  27.     //创建多条折线的图表
  28.     mManager.showBarChart(xValues, yValues, names, colours);
  29.   }

今天的文章基本都是源码，有使用的MPAndroidChart BarChart的可以参考。

avatar
文章
阅读
粉丝