MPAndroidChart项目实战（一）——实现对比性柱状图

最新推荐文章于 2022-09-22 11:44:39 发布

天一方蓝

最新推荐文章于 2022-09-22 11:44:39 发布

阅读量1.3w

点赞数 6

分类专栏： MpAndroidChart项目实战文章标签： MPAndroidChart 对比性柱状图 github android

本文链接：https://blog.csdn.net/dt235201314/article/details/52242221

版权

MpAndroidChart项目实战专栏收录该内容

12 篇文章 6 订阅

订阅专栏

本文出自：http://blog.csdn.net/dt235201314/article/details/52242221

一丶简介

1.上上篇贴上的设计图

二丶分析

1.设计图要求显示对比性数据

2.可横向滑动X轴浏览全月数据

3.可切换日排列，月排列，周排列

4.切换数据明细和图标展示

三丶实现与效果图（这里用项目外小例子讲解柱状图实现）

1.导入三方jar包（可参照）

MPAndroidChart（GitHub上优秀得图表功能库）

MPAndroidChart常见设置属性（一）——应用层

2.布局activity_main.xml(这里显示了两个，其实多余)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

   <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_below="@+id/chart"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

3.柱状图类BarChart3s.java

public class BarChart3s {

    public BarChart3s(BarChart chart) {
        // 数据描述
        chart.setDescription("");
        //背景
        chart.setBackgroundColor(0xffffffff);
        //定义数据描述得位置
        //chart.setDescriptionPosition(2,100);
        // 设置描述文字的颜色
        // chart.setDescriptionColor(0xffededed);
        // 动画
        chart.animateY(1000);
        //设置无边框
        chart.setDrawBorders(false);
        // 设置是否可以触摸
        chart.setTouchEnabled(true);
        // 是否可以拖拽
        chart.setDragEnabled(true);
        // 是否可以缩放
        chart.setScaleEnabled(true);
        //设置网格背景
        chart.setGridBackgroundColor(0xffffffff);
        //设置边线宽度
        chart.setBorderWidth(0);
        //设置边线颜色
        chart.setBorderColor(0xffffffff);
        // 集双指缩放
        chart.setPinchZoom(false);
        // 隐藏右边的坐标轴
        chart.getAxisRight().setEnabled(false);
        // 隐藏左边的左边轴
        chart.getAxisLeft().setEnabled(true);

        Legend mLegend = chart.getLegend(); // 设置比例图标示
        // 设置窗体样式
        mLegend.setForm(Legend.LegendForm.SQUARE);
        //设置图标位置
        mLegend.setPosition(Legend.LegendPosition.LEFT_OF_CHART);
        // 字体
        mLegend.setFormSize(4f);
        //是否显示注释
        mLegend.setEnabled(false);
        // 字体颜色
//        mLegend.setTextColor(Color.parseColor("#7e7e7e"));

        //设置X轴位置
        XAxis xAxis = chart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        // 前面xAxis.setEnabled(false);则下面绘制的Grid不会有"竖的线"（与X轴有关）
        // 上面第一行代码设置了false,所以下面第一行即使设置为true也不会绘制AxisLine
        //设置轴线得颜色
        xAxis.setAxisLineColor(0xffffffff);
        xAxis.setDrawAxisLine(false);
        xAxis.setDrawGridLines(false);
        xAxis.setSpaceBetweenLabels(2);

        //设置Y轴
        YAxis leftAxis = chart.getAxisLeft();
        //Y轴颜色
        leftAxis.setAxisLineColor(0xffffffff);
        //Y轴参照线颜色
        leftAxis.setGridColor(0xfff3f3f3);
        //参照线长度
        leftAxis.setAxisLineWidth(5f);
        // 顶部居最大值站距离占比
        leftAxis.setSpaceTop(20f);

        chart.invalidate();
    }

    public ArrayList<BarDataSet> getDataSet() {
        ArrayList<BarDataSet> dataSets = null;
        ArrayList<BarEntry> valueSet1 = new ArrayList<BarEntry>();
        for (int i = 0; i < 31; i++) {
            float value = (float) (Math.random() * 100/*100以内的随机数*/) + 3;
            valueSet1.add(new BarEntry(value,i));}


        ArrayList<BarEntry> valueSet2 = new ArrayList<BarEntry>();
        for (int j = 0; j < 31; j++) {
            float value1 = (float) (Math.random() * 100/*100以内的随机数*/) + 3;
            valueSet2.add(new BarEntry(value1,j));}


        BarDataSet barDataSet1 = new BarDataSet(valueSet1, "目标");
        barDataSet1.setColor(Color.parseColor("#45a2ff"));

        barDataSet1.setBarShadowColor(Color.parseColor("#01000000"));

        BarDataSet barDataSet2 = new BarDataSet(valueSet2, "实际");
        barDataSet2.setColor(Color.parseColor("#6faae7"));
        barDataSet2.setBarShadowColor(Color.parseColor("#01000000"));

        dataSets = new ArrayList<BarDataSet>();
        dataSets.add(barDataSet1);
        dataSets.add(barDataSet2);


        return dataSets;
    }

    public ArrayList<String> getXAxisValues() {
        ArrayList<String> xAxis = new ArrayList<String>();
        for (int j = 0; j < 31; j++){
            xAxis.add("8-"+(j+1));
        }
        return xAxis;
    }
}

4.MainActivity.java

public class MainActivity extends Activity {
   private BarChart3s mBarChart3s;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      setContentView(R.layout.activity_main);
      
      BarChart chart = (BarChart) findViewById(R.id.chart);
      BarChart chart1 = (BarChart) findViewById(R.id.chart1);
      mBarChart3s = new BarChart3s(chart);
      mBarChart3s = new BarChart3s(chart1);
        BarData data = new BarData(mBarChart3s.getXAxisValues(), mBarChart3s.getDataSet());

        // 设置数据
        chart.setData(data);
      chart1.setData(data);

        
   }
}