锐客网

  1. 首页 > 睿知 > it技术 > >

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

androidIT知识直方图MPAndroidCha

五陵年少金市东，银鞍白马渡春风。这篇文章主要讲述AndroidMPAndroidCharts 框架 画可滑动查看的直方图相关的知识，希望能为你提供帮助。
1.因为公司项目的需求， 所以花了1.2天研究 MPandroidCharts框架 。但是发现好多博客对我都没得帮助， 浪费很多时间在百度上， 不得不说google 真是比百度强太多了。
要求： 统计出56个名族的数量
原创作者的github： https://github.com/PhilJay/MPAndroidChart
MPAndroidChartsAPI地址： https://jitpack.io/com/github/PhilJay/MPAndroidChart/v2.2.5/javadoc/


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

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

然后在引入仓库
AndroidMPAndroidCharts 框架 画可滑动查看的直方图

文章图片




3.正式开始使用
xml文件：

< ?xml version= " 1.0" encoding= " utf-8" ?> < RelativeLayout xmlns:android= " http://schemas.android.com/apk/res/android" xmlns:tools= " http://schemas.android.com/tools" android:id= " @ + id/activity_main" android:layout_width= " match_parent" android:layout_height= " match_parent" tools:context= " aas.androidmpcharts.MainActivity" > < com.github.mikephil.charting.charts.BarChart android:id= " @ + id/mBarChart" android:layout_width= " match_parent" android:layout_height= " 300dp" /> < /RelativeLayout>




MainActivity代码：
public class MainActivity extends AppCompatActivity { BarChart mBarChart; ArrayList< String> mlist= new ArrayList< String> (); @ 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.6fdraw(); }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); } } }


最后的结果：
AndroidMPAndroidCharts 框架 画可滑动查看的直方图

文章图片




在做的过程中遇到的几个坑说下： ：
1.xAxis.setAxisMaximum(500f); 设置x轴的最大轴。最开始我是这样设置的。。然后添加BarEntry的时候， 随便填写x轴的坐标。但是最后发现有bug
妈的。 纠结了很久。 然后看原作者的demo ， 发现作者并没有调用xAxis.setAxisMaximum(500f)。。每个直方图的坐标从1， 开始往后数。记住一定要从1

开始。。从0开始会遇到问题。

2.如何给 每个直方图 下面添加标签： 主要用到的是IAxisValueFormatter 重写
public String getFormattedValue(float value, AxisBase axis)通过这个value值 获取标签。。但是我debug发现 这个value并不是严格的1

， 2,3,4,5 等等 这样按照顺序遍历的。所以这个方法 我不是很理解。看作者的代码也看不懂。坑





【AndroidMPAndroidCharts 框架 画可滑动查看的直方图】demo地址： http://download.csdn.net/detail/qq_25984015/9794208



    推荐阅读


    上一篇：Android绘制优化布局优化

    下一篇：idea android 开发