美文网首页android开发杂识Android_UI自定义View系列
手把手教你使用MPAndroidChart实现柱状图,饼状图和线

手把手教你使用MPAndroidChart实现柱状图,饼状图和线

作者: 小怪兽打葫芦娃 | 来源:发表于2017-06-13 22:21 被阅读3738次

    Android程序员面试宝典

    本文配套视频:

    http://www.toutiao.com/i6431290280183333378/
    http://www.toutiao.com/i6431289872253714945/

    项目总地址:https://github.com/open-android/Android

    • 一个非常强大的用于数据统计展示的View,支持多样的折线图,柱状图,饼状图,网状图,点状图等等,基本上可以满足我们所有的需求。

    • github地址:https://github.com/PhilJay/MPAndroidChart

    • 原理(该类库太庞大,只进行简单分析):

    • 有很多实现类,如LineChart(线状图),BarChart(柱状图),PieChart(饼状图)等,他们都重写了onDraw方法,并按照如下步骤绘制出内容:

    //1.绘制背景
    drawGridBackground(canvas);
    //2.绘制X,y轴线
    mXAxisRenderer.renderAxisLine(canvas);
    mAxisRendererLeft.renderAxisLine(canvas);
    mAxisRendererRight.renderAxisLine(canvas);
    //3.绘制网格线
    mXAxisRenderer.renderGridLines(canvas);
    mAxisRendererLeft.renderGridLines(canvas);
    mAxisRendererRight.renderGridLines(canvas);
    //4.绘制图形数据,如绘制线,绘制柱形,绘制饼状
    mRenderer.drawData(canvas);
    //5.绘制单位标签
    mXAxisRenderer.renderAxisLabels(canvas);
    mAxisRendererLeft.renderAxisLabels(canvas);
    mAxisRendererRight.renderAxisLabels(canvas)
    //6.绘制图形的数值
    mRenderer.drawValues(canvas);
    //7.绘制mark标记
    drawMarkers(canvas);
    //8.绘制表格描述说明
    drawDescription(canvas);
    

    用法如下(只拿线状图,柱状图,饼状图举例):

    如何使用线状图:

    mChart = (LineChart) findViewById(R.id.line_chart);
    //设置没有数据时候展示的文本
    mChart.setNoDataText("目前木有数据哦");
    //1.给Chart设置数据
    mChart.setData(getLineData());
    //2.设置y轴的取值范围
    YAxis axisLeft = mChart.getAxisLeft();
    //设置y轴最小值
    axisLeft.setAxisMinValue(0);
    //设置y轴最大值
    axisLeft.setAxisMaxValue(50);
    //3.设置去掉右边的y轴线
    YAxis axisRight = mChart.getAxisRight();
    axisRight.setEnabled(false);
    //4.设置是否启用x轴线
    XAxis xAxis = mChart.getXAxis();
    xAxis.setEnabled(true);//显示x轴线
    //5.设置表格描述信息
    mChart.setDescription("表格描述");
    //6.设置是否绘制表格背景
    mChart.setDrawGridBackground(true);
    //设置表格网格背景的颜色
    //mChart.setGridBackgroundColor(Color.BLUE);
    //7.设置绘制动画的时间
    mChart.animateXY(3000,3000);
    

    给线状图准备数据,需要构造LineDataSet,每一条线的数据就是一个LineDataSet对象, 该对象可以设置线的颜色,线条的标签,粗细等

    public LineData getLineData() {
        int maxX = 10;
        List<Entry> entryList = new ArrayList<>();
        List<Entry> entryList2 = new ArrayList<>();
        for (int i=0;i<maxX; i++){
            //每个entry相当于线条上面的一个点
            Entry entry = new BarEntry(i*5,i);
            entryList.add(entry);
            Entry entry2 = new BarEntry(i*6+5,i);
            entryList2.add(entry2);
        }
        //创建LineDataSet对象,表示一条线的数据
        LineDataSet dataSet = new LineDataSet(entryList,"Line1");
        LineDataSet dataSet2 = new LineDataSet(entryList2,"Line2");
        //设置线条颜色和宽度
        dataSet.setLineWidth(4);
        dataSet.setColor(Color.RED);
        //dataSet.setDrawCircleHole(false);//是否绘制空心圆
        //是否绘制圆形
        dataSet.setDrawCircles(false);//不绘制线条上面的圆
        //创建集合,存储所有线条数据对象
        List<ILineDataSet> list = new ArrayList<>();
        //存放一条线的数据
        list.add(dataSet);
        list.add(dataSet2);
        //生成x轴的数据
        List<String> xVals = ChartData.generateXVals(0, maxX);
        LineData lineData = new LineData(xVals,list);
        return lineData;
    }
    

    如何使用柱状图:

     //创建条形数据对象
    BarChart barChart = new BarChart(this);
    setContentView(barChart);
    //设置条形数据
    barChart.setData(getBarData());
    //设置描述
    barChart.setDescription("2016行业薪资比较");
    //设置绘制bar的阴影
    barChart.setDrawBarShadow(true);
    //设置绘制的动画时间
    barChart.animateXY(3000,3000);
    

    如何给柱状图设置数据,主要是构造BarDataSet对象,它需要一个装有BarEntry的集合, 每一个柱形都是一个BarEntry:

    public BarData getBarData() {
    int maxX = 10;
    //创建集合,存放每个柱子的数据
    List<BarEntry> list = new ArrayList<>();
    List<BarEntry> list2 = new ArrayList<>();
    for (int i=0;i<maxX;i++){
        //一个BarEntry就是一个柱子的数据对象
        BarEntry barEntry = new BarEntry(i+5,i);
        list.add(barEntry);
        BarEntry barEntry2 = new BarEntry(i+3,i);
        list2.add(barEntry2);
    }
    //创建BarDateSet对象,其实就是一组柱形数据
    BarDataSet barSet = new BarDataSet(list,"Android");
    BarDataSet barSet2 = new BarDataSet(list2,"iOS");
    //设置柱形的颜色
    barSet.setColor(Color.BLUE);
    //设置是否显示柱子上面的数值
    barSet.setDrawValues(false);
    //设置柱子阴影颜色
    barSet.setBarShadowColor(Color.GRAY);
    //创建集合,存放所有组的柱形数据
    List<IBarDataSet> dataSets = new ArrayList<>();
    dataSets.add(barSet);
    dataSets.add(barSet2);
    BarData barData = new BarData(ChartData.generateXVals(0,maxX),dataSets);
    return barData;
    

    如何使用饼状图:

    PieChart pieChart = new PieChart(this);
    setContentView(pieChart);
    
    //设置饼状图数据
    pieChart.setData(getPieData());
    
    //设置描述
    pieChart.setDescription("胡萝卜维生素成分比例");
    pieChart.setDescriptionTextSize(20);
    
    //设置中心说明文字
    pieChart.setCenterText("中心说明文字");
    pieChart.setCenterTextSize(20);
    pieChart.setCenterTextColor(Color.RED);
    
    pieChart.animateXY(3000,3000);
    

    如何给饼状图设置数据,主要构造PieData对象,它需要一个PieDataSet对象,set对象是装满Entry的集合,封装的是饼状百分比和位置的映射:

    public PieData getPieData() {
        ArrayList<Entry> list = new ArrayList<>();
        for (int i=0;i<3;i++){
            //一个Entry就是一个饼块
            Entry entry = new Entry(i+2,i);
            list.add(entry);
        }
    
        //创建一组饼块的数据
        PieDataSet pieDataSet = new PieDataSet(list,"标签");
    
        //设置饼块的间距
        pieDataSet.setSliceSpace(4);
        //设置饼快颜色
        pieDataSet.setColors(new int[]{Color.RED,Color.GREEN,Color.BLUE});
    
        //创建x轴
        ArrayList<String> xList = new ArrayList<>();
        xList.add("维生素A");
        xList.add("维生素B");
        xList.add("维生素C");
    
        PieData pieData = new PieData(xList,pieDataSet);
        return pieData;
    }
    
    • 欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视频

    • 微信公众号名称:Android干货程序员

    相关文章

      网友评论

      • 06040bfa169f:大神求带。。。
      • 06040bfa169f:周末了研究下。。。
      • 逸小苼:说实话,一般的app基本不会用很多的统计图表,还是自己写个比较合理
      • AwaitZhang:老哥,我第一部是该添加依赖?还是咋?如果添加依赖的话,我该加哪个?你也没说明白哈😅方便说一下吗?
      • DreamArea:大神,我正在画K线图。。😂😂

      本文标题:手把手教你使用MPAndroidChart实现柱状图,饼状图和线

      本文链接:https://www.haomeiwen.com/subject/ndpjqxtx.html