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

最新推荐文章于 2024-09-29 15:14:04 发布

BurNNingWang

最新推荐文章于 2024-09-29 15:14:04 发布

阅读量3.3k

点赞数

分类专栏： android 文章标签： android 框架图标

本文链接：https://blog.csdn.net/wang891019/article/details/53158536

版权

android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

https://github.com/PhilJay/MPAndroidChart

AS的导入：直接配置gradle，

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

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

2.初始化配置

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

 	<com.github.mikephil.charting.charts.CombinedChart
                android:id="@+id/chart1"
                android:layout_below="@+id/left_y"
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                >
            </com.github.mikephil.charting.charts.CombinedChart>
2.2这是饼状图的布局

	<com.github.mikephil.charting.charts.PieChart
                android:id="@+id/first_pie"
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp">
            </com.github.mikephil.charting.charts.PieChart>

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<String> barXData;//柱状图的x轴至的集合
    	private List<String> pieXData;//饼状图的x轴的集合
    	private List<BarEntry> barY1;//柱状图的y值集合
    	private List<Entry> barY2;//线条的y值集合
    	private ArrayList<Entry> pieY1;//饼状图的y
	List 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<Entry> 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<Integer> 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<String> xData, List<BarEntry> barEntries, List<Entry> 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<BarEntry> 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<Entry> 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<String> 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));
    }

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