最牛逼android上的图表库MpChart(三) 条形图

最牛逼android上的图表库MpChart(三) 条形图

最近工作中,用到了mpchart图表库,现在分享受下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代码
<?xml version="1.0" encoding="utf-8"?>
<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) {

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

        ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();

        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);
        List<Integer> list = new ArrayList<Integer>();
        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效果

这里写图片描述

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值