android柱状图和饼状图的的实现

还是先看看效果图，免得浪费大家的时间

1.第三方框架有很多，这里采用的是MPAndroidChart，github链接下面

https://github.com/PhilJay/MPAndroidChart

AS的导入：直接配置gradle，

compile 'com.github.PhilJay:MPAndroidChart:v2.2.4'。

Eclipse：请自行看github上的介绍。

2.初始化配置

2.1这是布局柱状图和线条的的布局

2.2这是饼状图的布局

2.3 一些初始化配置抽取成了static的工具方法

2.3.1柱状图的一些配置

/**     * 初始化一些配置     * @param mChart     */    public static void initMchat(Context context,CombinedChart mChart) {        mChart.setBackgroundColor(Color.WHITE);        mChart.setDrawGridBackground(false);        mChart.setDrawBarShadow(false);//柱状图无阴影        mChart.setDescription("");        // draw bars behind lines        mChart.setDrawOrder(new CombinedChart.DrawOrder[]{                CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.BUBBLE, CombinedChart.DrawOrder.CANDLE, CombinedChart.DrawOrder.LINE, CombinedChart.DrawOrder.SCATTER        });        //右侧y轴，针对线的y        YAxis rightAxis = mChart.getAxisRight();        rightAxis.setDrawGridLines(false);        rightAxis.setAxisLineWidth(Utils.dip2px(context, 1));        rightAxis.setAxisLineColor(Color.rgb(5, 112, 118));        rightAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true)        rightAxis.setTextColor(Color.rgb(5, 112, 118));        //左侧y坐标，针对柱的y        YAxis leftAxis = mChart.getAxisLeft();        leftAxis.setAxisLineColor(Color.rgb(253, 134, 10));        leftAxis.setAxisLineWidth(Utils.dip2px(context, 1));        leftAxis.setDrawGridLines(false);        leftAxis.setSpaceTop(0.1f);        leftAxis.setTextColor(Color.rgb(253,134,10));        //x轴相关的参数        XAxis xAxis = mChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置x周的位置        xAxis.setDrawGridLines(false);    }

2.3.2饼状图的一些初始化配置

 //初始化饼状图    public static void initPie(Context context,PieChart mChart){        mChart.setDescription("");        mChart.setExtraOffsets(5, 10, 5, 5);//外边距        mChart.setDragDecelerationFrictionCoef(0.95f);//转动惯性        mChart.setDrawHoleEnabled(true);//pie中央不绘制        mChart.setHoleColor(Color.WHITE);//中央的颜色        mChart.setTransparentCircleColor(Color.WHITE);//透明度        mChart.setTransparentCircleAlpha(110);        mChart.setHoleRadius(50f);//中心圆的半径        mChart.setTransparentCircleRadius(56f);//半透明圈        mChart.setDrawCenterText(true);//饼状图中间可以添加文字        mChart.setDrawSliceText(false);        mChart.setRotationAngle(0);//初始旋转角度        mChart.setRotationEnabled(true);        mChart.setHighlightPerTapEnabled(true);        mChart.setUsePercentValues(true);        Legend l = mChart.getLegend();        l.setEnabled(false);    }

3.数据的初始化
3.1饼状图和折线图的数据

private List barXData;//柱状图的x轴至的集合    private List pieXData;//饼状图的x轴的集合    private List barY1;//柱状图的y值集合    private List barY2;//线条的y值集合    private ArrayList pieY1;//饼状图的yList barBeans = chartDataBean.getMsg().getBar();//charDataBean为json解析到的数据bean           for (int i = 0; i < barBeans.size(); i++) {           ChartDataBean.MsgBean.BarBean barBean = (ChartDataBean.MsgBean.BarBean) barBeans.get(i);           barXData.add(barBean.getX());           //2.柱状图数据           BarEntry barEntry = new BarEntry((float) barBean.getIncome(), i);           barY1.add(barEntry);           //3.折线图数据           Entry entry = new Entry((float)barBean.getSaled(), i);           barY2.add(entry);

3.2饼状图的数据的初始化

       //饼状图的xvalue                      ChartDataBean.MsgBean.SectorIncomeBean sectorIncomeBean = sectorIncome.get(i);                      pie1XData.add(sectorIncomeBean.getName());             //饼状图的y value             Entry pieEntry = new Entry((float) sectorIncomeBean.getRate(), i);                     pieY1.add(pieEntry);  饼状图的数据填充是需要一个PieData的bean，接下来根据pieYdata生成这个bean        private PieDataSet generatePieDataSet(ArrayList yValues) {          //y轴的集合          PieDataSet pieDataSet = new PieDataSet(yValues, ""/*显示在比例图上*/);          pieDataSet.setSliceSpace(1f); //设置个饼状图之间的距离            generatePieColor();          pieDataSet.setColors(colors);            DisplayMetrics metrics = this.getResources().getDisplayMetrics();          float px = 3 * (metrics.densityDpi / 160f);          pieDataSet.setSelectionShift(px); // 选中态多出的长度          pieDataSet.setValueTextColor(Color.WHITE);//设置value的字体颜色          return pieDataSet;      }      private ArrayList generatePieColor() {          colors = new ArrayList<>();          // 饼图颜色          for (int i = 0; i < pieY1.size(); i++) {              colors.add(Color.rgb((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255)));          }          return colors;      }

generatePieColor()是为饼状图的每一块生成以个填充颜色,采用的是随机rgb，不知道为什么，出现相同颜色的概率特别高，不过界限仍然很清晰的，介意的可以加一个生成不重复的随机数的算法。

4.最后一步，数据的填

4.1柱状图的数据的填充（封装到了utils中）

MChatUtils.setData(chart1, barXData, barY1, barY2);

  /**     * 填充数据     * @param mChart  视图组件     * @param xData   x轴数据     * @param barEntries     * @param entryList     */    public static void setData(CombinedChart mChart, List xData, List barEntries, List entryList){        mChart.clear();        CombinedData data = new CombinedData(xData);//x坐标的坐标值        data.setData(generateLineData(entryList));//折线的数据        data.setData(generateBarData(barEntries));//柱状图的数据        mChart.setData(data);        mChart.getLegend().setForm(Legend.LegendForm.SQUARE);        mChart.invalidate();        mChart.animateXY(1000,1000);    }

  /**     * 生成柱状图的数据     * @return     */    public static BarData generateBarData(List entries) {        BarData d = new BarData();        BarDataSet barDataSet = new BarDataSet(entries, "金额(元)");        final DecimalFormat df = new DecimalFormat("0.00");        //设置数据样式        barDataSet.setValueFormatter(new ValueFormatter() {            @Override            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {                return "" + df.format(value);            }        });        barDataSet.setColor(Color.rgb(253, 134, 10));        barDataSet.setDrawValues(true);        barDataSet.setValueTextColor(Color.rgb(0, 0, 0));        barDataSet.setValueTextSize(10f);//        barDataSet.setBarSpacePercent(1);        barDataSet.setValueTextColor(Color.rgb(253, 134, 10));        d.addDataSet(barDataSet);        barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);        return d;    }    public static LineData generateLineData(List entries) {        d = new LineData();        lineDataSet = new LineDataSet(entries, "订单数量(个)");        //设置数据样式        lineDataSet.setValueFormatter(new ValueFormatter() {            @Override            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {                return ""+(int)value;            }        });        lineDataSet.setColor(Color.rgb(5, 112, 118));//线的颜色        lineDataSet.setLineWidth(1.5f);//线宽        lineDataSet.setCircleColor(Color.rgb(5, 112, 118));//圆点的颜色        lineDataSet.setCircleRadius(3f);//圆点的半径        lineDataSet.setCircleColorHole(Color.rgb(5, 112, 118));        lineDataSet.setFillColor(Color.rgb(5, 112, 118));        lineDataSet.setDrawCubic(false);//是否自动计算函数，曲线或是直线        lineDataSet.setDrawValues(true);//是否显示圆点对应的值        lineDataSet.setValueTextSize(10f);//圆点对应值得字体大小        lineDataSet.setValueTextColor(Color.rgb(5, 112, 118));//字体颜色        lineDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);//以哪个轴为准        d.addDataSet(lineDataSet);        return d;    }

4.2饼状图的数据的填充

MChatUtils.setPieData(first_pie, pie1XData, pieDataSet1); public static void setPieData(PieChart pieChart, List xValues, PieDataSet pieDataSet) {        pieChart.clear();        pieChart.animateY(2000, Easing.EasingOption.EaseInOutQuad);        PieData pieData=new PieData(xValues,pieDataSet);        pieData.setValueFormatter(new PercentFormatter());//设置为百分比显示        pieChart.setData(pieData);    }

4.2.1饼状图中间数据的填充

public static void setCenterText(PieChart pieChart, String text) {        pieChart.setCenterText(text);        pieChart.setCenterTextSize(20);        pieChart.setCenterTextColor(Color.rgb(61,149,25));    }

至此，整个流程完成，如有疑惑，下发留言

更多相关文章

随机推荐