Android MPAndroidCharts 框架画可滑动查看的直方图

V2AS问路

Android MPAndroidCharts 框架画可滑动查看的直方图

阅读原文时间：2023年07月15日阅读：1

1.由于公司项目的需求，所以花了1.2天研究 MPAndroidCharts框架。可是发现好多博客对我都没得帮助。浪费非常多时间在百度上。不得不说google 真是比百度强太多了。

要求：统计出56个名族的数量

原创作者的github：https://github.com/PhilJay/MPAndroidChart

MPAndroidCharts API地址：https://jitpack.io/com/github/PhilJay/MPAndroidChart/v2.2.5/javadoc/

2.用到的框架是MPAndroidCharts。引入的依赖：

compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'

然后在引入仓库

3.正式開始使用

xml文件：

xml version="1.0" encoding="utf-8"?>

<com.github.mikephil.charting.charts.BarChart  
    android:id="@+id/mBarChart"  
    android:layout\_width="match\_parent"  
    android:layout\_height="300dp"  
    />

MainActivity代码：

public class MainActivity extends AppCompatActivity {
BarChart mBarChart;
ArrayList mlist=new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBarChart = (BarChart) findViewById(R.id.mBarChart);

    mBarChart.setDrawBarShadow(false);     //表不要阴影  
    mBarChart.setDrawValueAboveBar(true);  
    Description description=new Description();  
    description.setText("通行民族");  
    mBarChart.setDescription(description);  //表的描写叙述信息

    mBarChart.setPinchZoom(false);  
    mBarChart.setMaxVisibleValueCount(60); //最大显示的个数。超过60个将不再显示  
    mBarChart.setScaleEnabled(false);     //禁止缩放  
    mBarChart.setDragEnabled(true);// 能否够拖拽  
    mBarChart.setHighlightPerDragEnabled(true);// 拖拽超过图标绘制画布时高亮显示  
    mBarChart.setDrawGridBackground(false);//  
  /\*  mBarChart.setAutoScaleMinMaxEnabled(true);\*/  
   /\* mBarChart.animateX(500);//数据显示动画，从左往右依次显示\*/  
   /\* mBarChart.getAxisRight().setEnabled(false);\*/  
    /\*mBarChart.setDragDecelerationEnabled(true);\*///拖拽滚动时。手放开是否会持续滚动，默认是true（false是拖到哪是哪，true拖拽之后还会有缓冲）  
    mBarChart.zoom(2.5f,1f,0,0);//显示的时候 是 依照多大的比率缩放显示   1f表示不放大缩小  
    //我默认手机屏幕上显示10  剩下的滑动直方图 然后显示。

。假如要显示25个那么除以10 就是放大2.5f。

。同理
// 56个民族那么放大5.6f

    draw();  
}

public void draw(){

    //X轴 样式  
    final XAxis xAxis = mBarChart.getXAxis();  
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);  
    xAxis.setLabelRotationAngle(90);//柱的以下描写叙述文字  旋转90度  
    xAxis.setDrawLabels(true);  
    xAxis.setDrawGridLines(false);  
    xAxis.setTypeface(Typeface.createFromAsset(getAssets(), "OpenSans-Light.ttf"));//字体的相关的设置  
    xAxis.setGranularity(1f);//设置最小间隔。防止当放大时，出现反复标签。  
    xAxis.setCenterAxisLabels(true);//字体以下的标签 显示在每一个直方图的中间  
    xAxis.setLabelCount(11,true);//一个界面显示10个Lable。那么这里要设置11个  
    xAxis.setTextSize(10f);

    //Y轴样式  
    YAxis leftAxis = mBarChart.getAxisLeft();  
    leftAxis.setLabelCount(10);  
    leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE\_CHART);  
    leftAxis.setSpaceTop(15f);  
    leftAxis.setStartAtZero(false);  
    leftAxis.setYOffset(10f);

    //这个替换setStartAtZero(true)  
    leftAxis.setAxisMaxValue(50f);  
    leftAxis.setAxisMinValue(0f);  
    leftAxis.setDrawGridLines(true);//背景线  
    leftAxis.setAxisLineColor(getResources().getColor(R.color.colorPrimaryDark));

    //.设置比例图标的显示隐藏  
    Legend l = mBarChart.getLegend();  
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);  
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);  
    l.setOrientation(Legend.LegendOrientation.HORIZONTAL);  
    l.setDrawInside(false);  
    //样式  
    l.setForm(Legend.LegendForm.CIRCLE);  
    //字体  
    l.setFormSize(10f);  
    //大小  
    l.setTextSize(13f);  
    l.setFormToTextSpace(10f);  
    l.setXEntrySpace(10f);

    //模拟数据  
    ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();  
    yVals1.add(new BarEntry(1,23));  
    yVals1.add(new BarEntry(2, 20));  
    yVals1.add(new BarEntry(3, 30));  
    yVals1.add(new BarEntry(4, 10));  
    yVals1.add(new BarEntry(5, 45));  
    yVals1.add(new BarEntry(6, 50));  
    yVals1.add(new BarEntry(7, 35));  
    yVals1.add(new BarEntry(8, 26));  
    yVals1.add(new BarEntry(9, 14));  
    yVals1.add(new BarEntry(10, 20));  
    yVals1.add(new BarEntry(11, 33));  
    yVals1.add(new BarEntry(12, 44));  
    yVals1.add(new BarEntry(13, 42));  
    yVals1.add(new BarEntry(14, 41));  
    yVals1.add(new BarEntry(15, 12));  
    yVals1.add(new BarEntry(16, 31));  
    yVals1.add(new BarEntry(17, 21));  
    yVals1.add(new BarEntry(18, 20));  
    yVals1.add(new BarEntry(19, 44));  
    yVals1.add(new BarEntry(20, 42));  
    yVals1.add(new BarEntry(21, 41));  
    yVals1.add(new BarEntry(22, 12));  
    yVals1.add(new BarEntry(23, 31));  
    yVals1.add(new BarEntry(24, 21));  
    yVals1.add(new BarEntry(25, 20));  
    setData(yVals1);  
}  
private void setData(ArrayList yVals1) {  
    for(int i=1;i<=yVals1.size();i++) {  
        mlist.add(""+i);  
    }  
    IAxisValueFormatter ix=new MyXAxisValueFormatter(mlist);  
    mBarChart.getXAxis().setValueFormatter(ix);

    BarDataSet set1;  
    if (mBarChart.getData() != null &&  
            mBarChart.getData().getDataSetCount() > 0) {  
        set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);  
        set1.setValues(yVals1);  
        mBarChart.getData().notifyDataChanged();  
        mBarChart.notifyDataSetChanged();  
    } else {  
        set1 = new BarDataSet(yVals1, "The year 2017");  
        set1.setColors(ColorTemplate.MATERIAL\_COLORS);  
        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();  
        dataSets.add(set1);  
        BarData data = new BarData(dataSets);  
        data.setValueTextSize(10f);  
        data.setBarWidth(1f);  
        mBarChart.setData(data);  
    }  
}

public class MyXAxisValueFormatter implements IAxisValueFormatter {

    private List<String> mValues;

    public MyXAxisValueFormatter(List<String> values) {  
        this.mValues = values;  
    }

    @Override  
    public String getFormattedValue(float value, AxisBase axis) {  
       int x=(int)(value);  
        if (x<0)  
            x=0;  
        if (x>=mValues.size())  
            x=mValues.size()-1;  
        return mValues.get(x);  
    }  
}

}

最后的结果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjU5ODQwMTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

在做的过程中遇到的几个坑说下：：

1.xAxis.setAxisMaximum(500f); 设置x轴的最大轴。最開始我是这样设置的。。然后加入BarEntry的时候。随便填写x轴的坐标。

可是最后发现有bug

妈的。

纠结了非常久。

然后看原作者的demo 。发现作者并没有调用xAxis.setAxisMaximum(500f)。。每一个直方图的坐标从1，開始往后数。记住一定要从1

開始。。

从0開始会遇到问题。

2.怎样给每一个直方图以下加入标签：主要用到的是IAxisValueFormatter 重写