最牛逼android上的图表库MpChart（三） 条形图

最牛逼android上的图表库MpChart（三） 条形图

最近工作中，用到了mpchart图表库，现在分享受下mpchart图表库的各个图表在实际工作应用场景：

• 最牛逼android上的图表库MpChart（一） 介绍篇
• 最牛逼android上的图表库 MpChart（二） 折线图
• 最牛逼android上的图表库MpChart（三） 条形图
• 最牛逼android上的图表库MpChart（四） 饼图
• 最牛逼android上的图表库MpChart（五） 泡泡图

附上mpandroidchartlibrary-2-1-6.jar的下载链接：http://download.csdn.net/detail/hejjunlin/9561829

使用mpchart jar包：mpandroidchartlibrary-2-1-6.jar 如果是在studio下，进行如下引用： repositories { maven { url “https://jitpack.io” } }

dependencies { compile ‘com.github.PhilJay:MPAndroidChart:v2.1.6’ }

BarChart条形图介绍

• BarChart类
• 使用哪些API

BarChart条形图实例

• 布局文件
• Java代码

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.github.mikephil.charting.charts.BarChart  android:id="@+id/chart1" android:layout_width="match_parent" android:layout_height="match_parent" /> RelativeLayout> 

package com.example.mpchart; import java.util.ArrayList; import java.util.List; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.Color; import android.graphics.PointF; import android.graphics.RectF; import android.graphics.Typeface; import android.os.Bundle; import android.os.Handler; import android.os.Looper; import android.os.Message; import android.util.Log; import android.view.WindowManager; import com.example.mpchart.data.ErrorCodePercentDataSource; import com.example.mpchart.data.IDataSource; import com.example.mpchart.data.IDataSource.onDataChangedListener; import com.example.mpchart.utils.DBHelper; import com.example.mpchart.utils.DateUtils; import com.example.mpchart.utils.LogUtils; import com.github.mikephil.charting.charts.BarChart; import com.github.mikephil.charting.components.Legend; import com.github.mikephil.charting.components.Legend.LegendDirection; import com.github.mikephil.charting.components.Legend.LegendForm; import com.github.mikephil.charting.components.Legend.LegendPosition; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.components.XAxis.XAxisPosition; import com.github.mikephil.charting.components.YAxis; import com.github.mikephil.charting.components.YAxis.AxisDependency; import com.github.mikephil.charting.components.YAxis.YAxisLabelPosition; import com.github.mikephil.charting.data.BarData; import com.github.mikephil.charting.data.BarDataSet; import com.github.mikephil.charting.data.BarEntry; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.formatter.YAxisValueFormatter; import com.github.mikephil.charting.highlight.Highlight; import com.github.mikephil.charting.listener.OnChartValueSelectedListener; import com.github.mikephil.charting.utils.ColorTemplate; public class BarChartActivity extends Activity implements OnChartValueSelectedListener { private static final String TAG = "BarChartActivity"; protected BarChart mChart; private IDataSource mDataSource = new ErrorCodePercentDataSource(); private String mDateTime; private Typeface mTf; private Handler mHandler = new Handler(Looper.getMainLooper()) { @Override public void handleMessage(Message msg) { super.handleMessage(msg);
            getData();
        }
    }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_barchart);

        mChart = (BarChart) findViewById(R.id.chart1);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setDescription(""/*mDataSource.getDescription()*/);
        mChart.setDescriptionTextSize(30); //        mChart.setDescriptionPosition(960, 550); mChart.setDrawBarShadow(false);
        mChart.setDrawValueAboveBar(true); // if more than 60 entries are displayed in the chart, no values will be // drawn mChart.setMaxVisibleValueCount(60); // scaling can now only be done on x- and y-axis separately mChart.setPinchZoom(false);

        mChart.setDrawGridBackground(false); // mChart.setDrawYLabels(false); mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");

        XAxis xAxis = mChart.getXAxis();
        xAxis.setPosition(XAxisPosition.BOTTOM);
        xAxis.setTypeface(mTf);
        xAxis.setDrawGridLines(false);
        xAxis.setSpaceBetweenLabels(2);

        YAxisValueFormatter custom = new MyYAxisValueFormatter();//设置Y轴上的显示单位 YAxis leftAxis = mChart.getAxisLeft();
        leftAxis.setTypeface(mTf);
        leftAxis.setLabelCount(8, false);
        leftAxis.setValueFormatter(custom);
        leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
        leftAxis.setSpaceTop(15f);
        leftAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true) YAxis rightAxis = mChart.getAxisRight();
        rightAxis.setDrawGridLines(false);
        rightAxis.setTypeface(mTf);
        rightAxis.setLabelCount(8, false);
        rightAxis.setValueFormatter(custom);
        rightAxis.setSpaceTop(15f);
        rightAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true) Legend l = mChart.getLegend();
        l.setPosition(LegendPosition.BELOW_CHART_LEFT);
        l.setForm(LegendForm.SQUARE);
        l.setFormSize(9f);
        l.setTextSize(11f);
        l.setXEntrySpace(4f);

        getData(); new Thread(mRunnable).start(); // mChart.setDrawLegend(false); } private Runnable mRunnable = new Runnable() { @Override public void run() { while(true) { try {
                       Thread.sleep(15*1000);//15s刷新下数据 mHandler.sendMessage(mHandler.obtainMessage());
                   } catch (InterruptedException e) {
                       e.printStackTrace();
                  }
                  }
        }
    }; private onDataChangedListener listener = new onDataChangedListener() { @Override public void onChanged(String[] xx, String[] yy) {
            notifyDataChanged(xx, yy);
        }
    }; private void getData() {
        LogUtils.d(TAG, "getData() " + DateUtils.getCurrentDate()); new Thread(new Runnable() { @Override public void run() {
                DBHelper.getInstance().init();
                String table = "error_info_" + DateUtils.get2HoursDate();
                String sql = "select *from " + table + " limit 20"/* + DateUtils.get2HoursDate()*/;
                boolean isexist = DBHelper.getInstance().isTableExist(table); if (isexist) {
                    mDateTime = DateUtils.get2HoursDate(); final String[] xx = DBHelper.getInstance().query(sql,3); final String[] yy = DBHelper.getInstance().query(sql,5);
                    mHandler.post(new Runnable() { @Override public void run() {
                            listener.onChanged(xx, yy);
                        }
                    });
                } else {
                    String table2 = "error_info_" + DateUtils.getOneHoursAgoTime();
                    mDateTime = DateUtils.getOneHoursAgoTime();
                    String sql2 = "select *from " + table2 + " limit 20";
                    LogUtils.d(TAG, "getData() sql2 " + sql2); final String[] xx = DBHelper.getInstance().query(sql2,3); final String[] yy = DBHelper.getInstance().query(sql2,5);
                    mHandler.post(new Runnable() { @Override public void run() {
                            listener.onChanged(xx, yy);
                        }
                    });
                }
            }
        }).start();
    } private void notifyDataChanged(String[] xx, String[] yy) {
        Typeface tf = Typeface.createFromAsset(getAssets(),"OpenSans-Regular.ttf"); // 加载数据 setData(xx,yy ); //从X轴进入的动画 mChart.animateX(2000); //        mChart.animateY(2000);   //从Y轴进入的动画 //        mChart.animateXY(2000, 2000);    //从XY轴一起进入的动画 //设置最小的缩放 mChart.setScaleMinima(0.5f, 1f); //设置视口 // mChart.centerViewPort(10, 50); // get the legend (only possible after setting data) Legend l = mChart.getLegend();
        l.setForm(LegendForm.LINE); //设置图最下面显示的类型 l.setTypeface(tf);  
        l.setTextSize(30);
        l.setTextColor(Color.rgb(244, 117, 117));
        l.setDirection(LegendDirection.LEFT_TO_RIGHT);
        l.setYOffset(660);
        l.setFormSize(20f); // set the size of the legend forms/shapes // 刷新图表 mChart.invalidate();
    } private void setData(String[] xx, String[] yy) {

        ArrayListxVals = new ArrayList(); for (int i = 0; i < xx.length; i++) {
            xVals.add(xx[i]);
        }

        ArrayListyVals1 = new ArrayList(); for (int i = 0; i < yy.length; i++) { float y = Float.parseFloat(yy[i]);
            yVals1.add(new BarEntry(y, i));//填充数据 }

        BarDataSet set1;
        mChart.animateY(2000);//设置动画 set1 = new BarDataSet(yVals1, "DataSet");
        set1.setBarSpacePercent(35f);
        set1.setColors(ColorTemplate.LIBERTY_COLORS);


        BarDataSet dataSets = new BarDataSet(yVals1, "错误码占比监控,数据来源： + mDateTime);
        Listlist = new ArrayList();
        list.add(Color.rgb(179, 48, 80));//设置颜色
        list.add(Color.rgb(106, 167, 134));
        list.add(Color.rgb(53, 194, 209));
        list.add(Color.rgb(118, 174, 175));
        list.add(Color.rgb(42, 109, 130));
        list.add(Color.rgb(106, 150, 31));
        list.add(Color.rgb(179, 100, 53));
        list.add(Color.rgb(193, 37, 82));
        list.add(Color.rgb(255, 102, 0));
        list.add(Color.rgb(217, 80, 138));
        list.add(Color.rgb(254, 149, 7));
        list.add(Color.rgb(254, 247, 120));
        dataSets.setColors(list);

        BarData data = new BarData(xVals, dataSets);
        data.setValueTextSize(10f);
        data.setValueTypeface(mTf);

        mChart.setData(data);
    }

    @SuppressLint("NewApi")
    @Override
    public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {

        if (e == null)
            return;

        RectF bounds = mChart.getBarBounds((BarEntry) e);
        PointF position = mChart.getPosition(e, AxisDependency.LEFT);

        Log.i("bounds", bounds.toString());
        Log.i("position", position.toString());

        Log.i("x-index",
                "low: " + mChart.getLowestVisibleXIndex() + ", high: "
                        + mChart.getHighestVisibleXIndex());
    }

    public void onNothingSelected() {
    };
} 

BarChart效果