MPAndroidChart3.0使用详解(二)----柱状图、折线图、组合图的使用

来源:互联网 发布:魔兽数据库2.43 编辑:程序博客网 时间:2024/06/05 19:48

上篇主要讲到了MPAndroidChart这个开源库的一些基本特性和基础设置,现在来讲下我们经常要用到的柱状图(直方图)、折线图和组合图的使用。

柱状图

再讲之前,先看效果图。
这里写图片描述
第一个是单个柱状图,第二个是组合(group)的柱状图
使用
1、首先先创建BarChart对象,并初始化,进行些基础设置
2、为BarChart添加对象,利用BarEntry添加x轴,y轴的数据
3、初始化BarDataSet对象,为BarDataSet添加BarEntry对象
4、初始化BarData对象,为BarData添加BarDataSet
5、为BarChart添加BarData,即BarChart.setData(barData)
这样就完成了柱状图的绘制。
一些BarChart属性的设置

setDrawValueAboveBar(boolean enabled):// 如果设置为true,在条形图上方显示值。如果为false,会显示在顶部下方。setDrawBarShadow(boolean enabled):// 是否显示阴影。启动它会降低约40%的性能setDrawValuesForWholeStack(boolean enabled):// 如果设置为true,堆叠条形的所有值会分别绘制,而不仅仅是他们所有的顶部总和。setDrawHighlightArrow(boolean enabled):// 是否强调绘制箭头

这里已经封装好了一个BarChartManager,使用的时候只用添加数据即可。代码如下:

import android.graphics.Color;import com.github.mikephil.charting.animation.Easing;import com.github.mikephil.charting.charts.BarChart;import com.github.mikephil.charting.components.Description;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.components.LimitLine;import com.github.mikephil.charting.components.XAxis;import com.github.mikephil.charting.components.YAxis;import com.github.mikephil.charting.data.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;import java.util.ArrayList;import java.util.List;/** * Descriptions:柱状图管理类 */public class BarChartManager {    private BarChart mBarChart;    private YAxis leftAxis;    private YAxis rightAxis;    private XAxis xAxis;    //颜色集合    List<Integer> colors = new ArrayList<>();    public BarChartManager(BarChart barChart) {        this.mBarChart = barChart;        leftAxis = mBarChart.getAxisLeft();        rightAxis = mBarChart.getAxisRight();        xAxis = mBarChart.getXAxis();        colors.add(Color.GREEN);        colors.add(Color.BLUE);        colors.add(Color.RED);        colors.add(Color.CYAN);        initBarChart();    }    /**     * 初始化LineChart     */    private void initBarChart() {        //背景颜色        mBarChart.setBackgroundColor(Color.WHITE);        //网格        mBarChart.setDrawGridBackground(false);        //背景阴影        mBarChart.setDrawBarShadow(false);        mBarChart.setHighlightFullBarEnabled(false);        //显示边界        mBarChart.setDrawBorders(false);        //设置动画效果        mBarChart.animateY(1000, Easing.EasingOption.Linear);        mBarChart.animateX(1000, Easing.EasingOption.Linear);        //图表的描述        mBarChart.getDescription().setText("");        //折线图例 标签 设置        Legend legend = mBarChart.getLegend();        legend.setForm(Legend.LegendForm.SQUARE);//图示 标签的形状。   正方形        legend.setTextSize(11f);        //显示位置        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);        legend.setDrawInside(false);        //XY轴的设置        //X轴设置显示位置在底部        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setGranularity(1f);//设置最小的区间,避免标签的迅速增多        xAxis.setDrawGridLines(false);//设置竖状的线是否显示        xAxis.setCenterAxisLabels(true);//设置标签居中       // xAxis.setSpaceMax(10);       // xAxis.setValueFormatter();        leftAxis.setDrawGridLines(true);//设置横状的线是否显示        leftAxis.enableGridDashedLine(6f, 3f, 0);//虚线        leftAxis.setAxisLineWidth(1f);        leftAxis.setEnabled(true);        leftAxis.setGridColor(0xacb3e5fc);     //   leftAxis.setTextColor(0xb3e5fc);//设置左边Y轴文字的颜色     //   leftAxis.setAxisLineColor(0xb3e5fc);//设置左边Y轴的颜色       // rightAxis.setDrawGridLines(false);//设置横状的线是否显示        rightAxis.setEnabled(false);//隐藏右边轴和数字        //保证Y轴从0开始,不然会上移一点        leftAxis.setAxisMinimum(0f);        rightAxis.setAxisMinimum(0f);        mBarChart.setDoubleTapToZoomEnabled(false); // 设置为false以禁止通过在其上双击缩放图表。       // mBarChart.setBorderWidth(15);//设置边界宽度    }    /**     * 展示柱状图(一条)     *     * @param xAxisValues     * @param yAxisValues     * @param label     * @param color     */    public void showBarChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {        ArrayList<BarEntry> entries = new ArrayList<>();        for (int i = 0; i < xAxisValues.size(); i++) {            entries.add(new BarEntry(xAxisValues.get(i), yAxisValues.get(i)));        }        // 每一个BarDataSet代表一类柱状图        BarDataSet barDataSet = new BarDataSet(entries, label);        barDataSet.setColor(color);        barDataSet.setValueTextSize(9f);        barDataSet.setFormLineWidth(1f);        barDataSet.setFormSize(15.f);        ArrayList<IBarDataSet> dataSets = new ArrayList<>();        dataSets.add(barDataSet);        BarData data = new BarData(dataSets);        //设置X轴的刻度数        xAxis.setLabelCount(xAxisValues.size()-1 , false);        mBarChart.setData(data);    }    /**     * 展示柱状图(多条)     *     * @param xAxisValues     * @param yAxisValues     * @param labels     * @param colours     */    public void showBarChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {        BarData data = new BarData();       // xAxis.setValueFormatter(new StringAxisValueFormatter(xAxisValues));        for (int i = 0; i < yAxisValues.size(); i++) {            ArrayList<BarEntry> entries = new ArrayList<>();            for (int j = 0; j < yAxisValues.get(i).size(); j++) {                entries.add(new BarEntry(xAxisValues.get(i), yAxisValues.get(i).get(j)));            }            BarDataSet barDataSet = new BarDataSet(entries, labels.get(i));            barDataSet.setColor(colours.get(i));            barDataSet.setValueTextColor(colours.get(i));            barDataSet.setValueTextSize(10f);            barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);            data.addDataSet(barDataSet);        }        int amount = yAxisValues.size();        float groupSpace = 0.12f; //柱状图组之间的间距        float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet        float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet        // (0.2 + 0.02) * 4 + 0.12 = 1.00 -> 组成1个"group"的宽度        xAxis.setLabelCount(xAxisValues.size() - 1, false);        data.setBarWidth(barWidth);        data.groupBars(0, groupSpace, barSpace);        mBarChart.setData(data);    }    protected void showBarChart(List<String> xValues, List<List<Float>> yValuesList,List<String> labels){        mBarChart.getXAxis().setValueFormatter(new StringAxisValueFormatter(xValues));        BarData data = new BarData();        for (int i = 0; i < yValuesList.size(); i++) {            ArrayList<BarEntry> entries = new ArrayList<>();            for (int j = 0; j < yValuesList.get(i).size(); j++) {                entries.add(new BarEntry(i, yValuesList.get(i).get(j)));            }            // y轴的数据集合            BarDataSet barDataSet = new BarDataSet(entries, labels.get(i));            barDataSet.setColor(colors.get(i));            barDataSet.setValueTextColor(colors.get(i));            barDataSet.setValueTextSize(10f);            data.addDataSet(barDataSet);        }        int amount = yValuesList.size();        float groupSpace = 0.12f; //柱状图组之间的间距        float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet        float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet        // (0.2 + 0.02) * 4 + 0.12 = 1.00 -> interval per "group"        mBarChart.getXAxis().setLabelCount(xValues.size()-1, false);        data.setBarWidth(barWidth);        xAxis.setAxisMaximum(xValues.size());        xAxis.setAxisMinimum(0);        data.groupBars(0, groupSpace, barSpace);        mBarChart.setData(data);    }    protected BarData getBarData(List<String> xValues, List<List<Float>> yValuesList) {        mBarChart.getXAxis().setValueFormatter(new StringAxisValueFormatter(xValues));        BarData data = new BarData();        for (int i = 0; i < yValuesList.size(); i++) {            ArrayList<BarEntry> entries = new ArrayList<>();            for (int j = 0; j < yValuesList.get(i).size(); j++) {                entries.add(new BarEntry(i, yValuesList.get(i).get(j)));            }            // y轴的数据集合            BarDataSet barDataSet = new BarDataSet(entries, xValues.get(i));            barDataSet.setColor(colors.get(i));            barDataSet.setValueTextColor(colors.get(i));            barDataSet.setValueTextSize(10f);            data.addDataSet(barDataSet);        }        int amount = yValuesList.size();        float groupSpace = 0.12f; //柱状图组之间的间距        float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet        float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet        // (0.2 + 0.02) * 4 + 0.08 = 1.00 -> interval per "group"        mBarChart.getXAxis().setLabelCount(xValues.size()-1, false);        data.setBarWidth(barWidth);        data.groupBars(0, groupSpace, barSpace);        return data;    }    /**     * 设置Y轴值     *     * @param max     * @param min     * @param labelCount     */    public void setYAxis(float max, float min, int labelCount) {        if (max < min) {            return;        }        leftAxis.setAxisMaximum(max);        leftAxis.setAxisMinimum(min);        leftAxis.setLabelCount(labelCount, false);        rightAxis.setAxisMaximum(max);        rightAxis.setAxisMinimum(min);        rightAxis.setLabelCount(labelCount, false);        mBarChart.invalidate();    }    /**     * 设置X轴的值     *     * @param max     * @param min     * @param labelCount     */    public void setXAxis(float max, float min, int labelCount) {        xAxis.setAxisMaximum(max);        xAxis.setAxisMinimum(min);        xAxis.setLabelCount(labelCount, false);        mBarChart.invalidate();    }    /**     * 设置高限制线     *     * @param high     * @param name     */    public void setHightLimitLine(float high, String name, int color) {        if (name == null) {            name = "高限制线";        }        LimitLine hightLimit = new LimitLine(high, name);        hightLimit.setLineWidth(4f);        hightLimit.setTextSize(10f);        hightLimit.setLineColor(color);        hightLimit.setTextColor(color);        leftAxis.addLimitLine(hightLimit);        mBarChart.invalidate();    }    /**     * 设置低限制线     *     * @param low     * @param name     */    public void setLowLimitLine(int low, String name) {        if (name == null) {            name = "低限制线";        }        LimitLine hightLimit = new LimitLine(low, name);        hightLimit.setLineWidth(4f);        hightLimit.setTextSize(10f);        leftAxis.addLimitLine(hightLimit);        mBarChart.invalidate();    }    /**     * 设置描述信息     *     * @param str     */    public void setDescription(String str) {        Description description = new Description();        description.setText(str);        mBarChart.setDescription(description);        mBarChart.invalidate();    }}

自定义的X轴数据转换类

import com.github.mikephil.charting.components.AxisBase;import com.github.mikephil.charting.formatter.IAxisValueFormatter;import java.util.List;/* * Description: x轴数据转换类 */public class StringAxisValueFormatter implements IAxisValueFormatter {    private List<String> xValues;    public StringAxisValueFormatter(List<String> xValues) {        this.xValues = xValues;    }    @Override    public String getFormattedValue(float v, AxisBase axisBase) {        try{            if (v < 0 || v > (xValues.size() - 1)){//使得两侧柱子完全显示                return "";            }            return xValues.get((int)v);        }catch (Exception e){            return "";        }    }}

Activity使用的时候:

 private void testBarChart() {        BarChartManager barChartManager1 = new BarChartManager(barChart1);        BarChartManager barChartManager2 = new BarChartManager(barChart2);        //设置x轴的数据        ArrayList<String> xValues0 = new ArrayList<>();        xValues0.add("早晨");        xValues0.add("上午");        xValues0.add("中午");        xValues0.add("下午");        xValues0.add("晚上");        //设置x轴的数据        ArrayList<Float> xValues = new ArrayList<>();        for (int i = 1; i < 6; i++) {            xValues.add((float) i);        }        //设置y轴的数据()        List<List<Float>> yValues = new ArrayList<>();        for (int i = 0; i < 4; i++) {            List<Float> yValue = new ArrayList<>();            for (int j = 0; j < 5; j++) {                yValue.add((float) (Math.random() * 8)+2);            }            yValues.add(yValue);        }        //颜色集合        List<Integer> colors = new ArrayList<>();        colors.add(Color.GREEN);        colors.add(Color.BLUE);        colors.add(Color.RED);        colors.add(Color.CYAN);        //线的名字集合        List<String> names = new ArrayList<>();        names.add("柱状一");        names.add("柱状二");        names.add("柱状三");        names.add("柱状四");        //创建多条柱状的图表        barChartManager1.showBarChart(xValues, yValues.get(0), names.get(1), colors.get(3));        barChartManager2.showBarChart(xValues0, yValues,names);    }

折线图

效果图如下:
这里写图片描述

使用
1、初始化LineChart对象,设置基础属性
2、初始化Entry对象,添加x轴和y轴数据
3、初始化LineDataSet对象,为其添加Entry
4、初始化LineData对象,为其添加LineDataSet对象
5、设置数据,显示图表LineChart.setData(lineData)

一样的,这里也封装了一个折线图管理类LineChartManager,代码如下:

import com.github.mikephil.charting.animation.Easing;import com.github.mikephil.charting.charts.LineChart;import com.github.mikephil.charting.components.Description;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.components.LimitLine;import com.github.mikephil.charting.components.XAxis;import com.github.mikephil.charting.components.YAxis;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.LineData;import com.github.mikephil.charting.data.LineDataSet;import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;import java.util.ArrayList;import java.util.List;/** * Descriptions: 折线图管理类 */public class LineChartManager {    private LineChart lineChart;    private YAxis leftAxis;   //左边Y轴    private YAxis rightAxis;  //右边Y轴    private XAxis xAxis;      //X轴    public LineChartManager(LineChart mLineChart) {        this.lineChart = mLineChart;        leftAxis = lineChart.getAxisLeft();        rightAxis = lineChart.getAxisRight();        xAxis = lineChart.getXAxis();        initLineChart();    }    /**     * 初始化LineChart     */    private void initLineChart() {        lineChart.setDrawGridBackground(false);        //显示边界        lineChart.setDrawBorders(false);        //设置动画效果        lineChart.animateY(1000, Easing.EasingOption.Linear);        lineChart.animateX(1000, Easing.EasingOption.Linear);        //折线图例 标签 设置        Legend legend = lineChart.getLegend();        legend.setForm(Legend.LegendForm.LINE);        legend.setTextSize(11f);        //显示位置        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);        legend.setDrawInside(false);        //XY轴的设置        //X轴设置显示位置在底部        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setAxisMinimum(0f);        xAxis.setGranularity(1f);        //保证Y轴从0开始,不然会上移一点        leftAxis.setAxisMinimum(0f);        rightAxis.setAxisMinimum(0f);        rightAxis.setEnabled(false);//        xAxis.setDrawGridLines(false);//不绘制x轴网线//        leftAxis.setDrawGridLines(false);//不绘制Y周网线    }    /**     * 初始化曲线 每一个LineDataSet代表一条线     *     * @param lineDataSet     * @param color     * @param mode        折线图是否填充     */    private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) {        lineDataSet.setColor(color);        lineDataSet.setCircleColor(color);        lineDataSet.setLineWidth(1f);        lineDataSet.setCircleRadius(3f);        //设置曲线值的圆点是实心还是空心        lineDataSet.setDrawCircleHole(true);        lineDataSet.setValueTextSize(9f);        //设置折线图填充        lineDataSet.setDrawFilled(mode);//填充曲线下方的区域        lineDataSet.setFormLineWidth(1f);        lineDataSet.setFormSize(15.f);        //线模式为圆滑曲线(默认折线)        lineDataSet.setMode(LineDataSet.Mode.LINEAR);    }    /**     * 展示折线图(一条)     *     * @param xAxisValues     * @param yAxisValues     * @param label     * @param color     */    public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {        ArrayList<Entry> entries = new ArrayList<>();        for (int i = 0; i < xAxisValues.size(); i++) {            entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));        }        // 每一个LineDataSet代表一条线        LineDataSet lineDataSet = new LineDataSet(entries, label);        //线模式为圆滑曲线(默认折线)        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);        //设置圆心半径        lineDataSet.setCircleRadius(3f);        //设置曲线值的圆点是实心还是空心        lineDataSet.setDrawCircleHole(false);        initLineDataSet(lineDataSet, color, false);        ArrayList<ILineDataSet> dataSets = new ArrayList<>();        dataSets.add(lineDataSet);        LineData data = new LineData(dataSets);        //设置X轴的刻度数        xAxis.setLabelCount(xAxisValues.size());        lineChart.setData(data);    }    public void showLineChart(List<String> xValues,List<Float> yValues,int color){        ArrayList<Entry> entries = new ArrayList<>();        xAxis.setValueFormatter(new StringAxisValueFormatter(xValues));        for (int i = 0; i < xValues.size(); i++) {            entries.add(new Entry( i, yValues.get(i)));        }        // 每一个LineDataSet代表一条线        LineDataSet lineDataSet = new LineDataSet(entries, "折线test");        initLineDataSet(lineDataSet, color, false);        ArrayList<ILineDataSet> dataSets = new ArrayList<>();        dataSets.add(lineDataSet);        LineData data = new LineData(dataSets);        //设置X轴的刻度数        xAxis.setLabelCount(xValues.size());        lineChart.setData(data);    }    /**     * 展示线性图(多条)     *     * @param xAxisValues     * @param yAxisValues 多条曲线Y轴数据集合的集合     * @param labels     * @param colors     */    public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colors) {        ArrayList<ILineDataSet> dataSets = new ArrayList<>();        for (int i = 0; i < yAxisValues.size(); i++) {            ArrayList<Entry> entries = new ArrayList<>();            for (int j = 0; j < yAxisValues.get(i).size(); j++) {//                if (j >= xAxisValues.size()) {//                    j = xAxisValues.size() - 1;//                }                entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));            }            LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));            initLineDataSet(lineDataSet, colors.get(i), false);            dataSets.add(lineDataSet);        }        LineData data = new LineData(dataSets);        xAxis.setLabelCount(xAxisValues.size(), true);        lineChart.setData(data);    }    /**     * 设置Y轴值     *     * @param max     * @param min     * @param labelCount     */    public void setYAxis(float max, float min, int labelCount) {        if (max < min) {            return;        }        leftAxis.setAxisMaximum(max);        leftAxis.setAxisMinimum(min);        leftAxis.setLabelCount(labelCount, false);        rightAxis.setAxisMaximum(max);        rightAxis.setAxisMinimum(min);        rightAxis.setLabelCount(labelCount, false);        lineChart.invalidate();    }    /**     * 设置X轴的值     *     * @param max     * @param min     * @param labelCount     */    public void setXAxis(float max, float min, int labelCount) {        xAxis.setAxisMaximum(max);        xAxis.setAxisMinimum(min);        xAxis.setLabelCount(labelCount, true);        lineChart.invalidate();    }    /**     * 设置高限制线     *     * @param high     * @param name     */    public void setHightLimitLine(float high, String name, int color) {        if (name == null) {            name = "高限制线";        }        LimitLine hightLimit = new LimitLine(high, name);        hightLimit.setLineWidth(2f);        hightLimit.setTextSize(10f);        hightLimit.setLineColor(color);        hightLimit.setTextColor(color);        leftAxis.addLimitLine(hightLimit);        lineChart.invalidate();    }    /**     * 设置低限制线     *     * @param low     * @param name     */    public void setLowLimitLine(int low, String name) {        if (name == null) {            name = "低限制线";        }        LimitLine hightLimit = new LimitLine(low, name);        hightLimit.setLineWidth(4f);        hightLimit.setTextSize(10f);        leftAxis.addLimitLine(hightLimit);        lineChart.invalidate();    }    /**     * 设置描述信息     *     * @param str     */    public void setDescription(String str) {        Description description = new Description();        description.setText(str);        lineChart.setDescription(description);        lineChart.invalidate();    }}

x轴数据转换类代码就不贴了,柱状图上面有。
Activity中使用

/**     * 测试折线图     */    private void testLineChart() {        LineChartManager lineChartManager1 = new LineChartManager(lineChart1);        LineChartManager lineChartManager2 = new LineChartManager(lineChart2);        //设置x轴的数据        ArrayList<Float> xValues = new ArrayList<>();        for (int i = 0; i < 10; i++) {//10组数据            xValues.add((float) i);        }        //设置y轴的数据()        List<List<Float>> yValues = new ArrayList<>();        for (int i = 0; i < 4; i++) {            List<Float> yValue = new ArrayList<>();            for (int j = 0; j < 10; j++) {                yValue.add((float) (Math.random() * 80));            }            yValues.add(yValue);        }        //颜色集合        List<Integer> colors = new ArrayList<>();        colors.add(Color.GREEN);        colors.add(Color.BLUE);        colors.add(Color.RED);        colors.add(Color.CYAN);        //线的名字集合        List<String> names = new ArrayList<>();        names.add("折线一");        names.add("折线二");        names.add("折线三");        names.add("折线四");        //创建单条折线的图表        lineChartManager1.showLineChart(xValues, yValues.get(0), names.get(0), colors.get(0));        lineChartManager1.setYAxis(100, 0, 11);        lineChartManager1.setDescription("温度");        // lineChartManager1.setXAxis(10,0,xValues.size());        lineChartManager1.setHightLimitLine(70,"高温报警",Color.RED);        //创建多条折线的图表       // lineChartManager2.showLineChart(xValues, yValues, names, colors);       // lineChartManager2.setYAxis(100, 0, 11);        lineChartManager2.showLineChart(xValues, yValues, names, colors);        lineChartManager2.setYAxis(100, 0, 11);        lineChartManager2.setDescription("温度");    }


组合图

组合图CombinedChart。这里主要是折线图和柱状图的组合形式
效果图如下:
这里写图片描述

xml文件

 <com.github.mikephil.charting.charts.CombinedChart            android:id="@+id/combine_chart2"            android:layout_width="match_parent"            android:layout_height="250dp"/>

这里也封装了一个CombinedChart工具类,CombinedChartManager代码如下:

public class CombinedChartManager {    private CombinedChart mCombinedChart;    private YAxis leftAxis;    private YAxis rightAxis;    private XAxis xAxis;    public CombinedChartManager(CombinedChart combinedChart) {        this.mCombinedChart = combinedChart;        leftAxis = mCombinedChart.getAxisLeft();        rightAxis = mCombinedChart.getAxisRight();        xAxis = mCombinedChart.getXAxis();    }    /**     * 初始化Chart     */    private void initChart() {        //不显示描述内容        mCombinedChart.getDescription().setEnabled(false);        mCombinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{                CombinedChart.DrawOrder.BAR,                CombinedChart.DrawOrder.LINE        });        mCombinedChart.setBackgroundColor(Color.WHITE);        mCombinedChart.setDrawGridBackground(false);        mCombinedChart.setDrawBarShadow(false);        mCombinedChart.setHighlightFullBarEnabled(false);        //显示边界        mCombinedChart.setDrawBorders(true);        //图例说明        Legend legend = mCombinedChart.getLegend();        legend.setWordWrapEnabled(true);        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);        legend.setDrawInside(false);        //Y轴设置        rightAxis.setDrawGridLines(false);        rightAxis.setAxisMinimum(0f);        leftAxis.setDrawGridLines(false);        leftAxis.setAxisMinimum(0f);        mCombinedChart.animateX(2000); // 立即执行的动画,x轴    }    /**     * 设置X轴坐标值     *     * @param xAxisValues x轴坐标集合     */    public void setXAxis(final List<String> xAxisValues) {        //设置X轴在底部        XAxis xAxis = mCombinedChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setGranularity(1f);        xAxis.setLabelCount(xAxisValues.size() - 1,false);        xAxis.setValueFormatter(new IAxisValueFormatter() {            @Override            public String getFormattedValue(float value, AxisBase axis) {                return xAxisValues.get((int) value % xAxisValues.size());            }        });        mCombinedChart.invalidate();    }    /**     * 得到折线图(一条)     *     * @param lineChartY 折线Y轴值     * @param lineName   折线图名字     * @param lineColor  折线颜色     * @return     */    private LineData getLineData(List<Float> lineChartY, String lineName, int lineColor) {        LineData lineData = new LineData();        ArrayList<Entry> yValue = new ArrayList<>();        for (int i = 0; i < lineChartY.size(); i++) {            yValue.add(new Entry(i, lineChartY.get(i)));        }        LineDataSet dataSet = new LineDataSet(yValue, lineName);        dataSet.setColor(lineColor);        dataSet.setCircleColor(lineColor);        dataSet.setValueTextColor(lineColor);        dataSet.setCircleSize(1);        //显示值        dataSet.setDrawValues(true);        dataSet.setValueTextSize(10f);        dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);        dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);        lineData.addDataSet(dataSet);        return lineData;    }    /**     * 得到折线图(多条)     *     * @param lineChartYs 折线Y轴值     * @param lineNames   折线图名字     * @param lineColors  折线颜色     * @return     */    private LineData getLineData(List<List<Float>> lineChartYs, List<String> lineNames, List<Integer> lineColors) {        LineData lineData = new LineData();        for (int i = 0; i < lineChartYs.size(); i++) {            ArrayList<Entry> yValues = new ArrayList<>();            for (int j = 0; j < lineChartYs.get(i).size(); j++) {                yValues.add(new Entry(j, lineChartYs.get(i).get(j)));            }            LineDataSet dataSet = new LineDataSet(yValues, lineNames.get(i));            dataSet.setColor(lineColors.get(i));            dataSet.setCircleColor(lineColors.get(i));            dataSet.setValueTextColor(lineColors.get(i));            dataSet.setCircleSize(1);            dataSet.setDrawValues(true);            dataSet.setValueTextSize(10f);            dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);            dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);            lineData.addDataSet(dataSet);        }        return lineData;    }    /**     * 得到柱状图     *     * @param barChartY Y轴值     * @param barName   柱状图名字     * @param barColor  柱状图颜色     * @return     */    private BarData getBarData(List<Float> barChartY, String barName, int barColor) {        BarData barData = new BarData();        ArrayList<BarEntry> yValues = new ArrayList<>();        for (int i = 0; i < barChartY.size(); i++) {            yValues.add(new BarEntry(i, barChartY.get(i)));        }        BarDataSet barDataSet = new BarDataSet(yValues, barName);        barDataSet.setColor(barColor);        barDataSet.setValueTextSize(10f);        barDataSet.setValueTextColor(barColor);        barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);        barData.addDataSet(barDataSet);        //以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定        xAxis.setAxisMinimum(-0.5f);        xAxis.setAxisMaximum((float) (barChartY.size()- 0.5));        return barData;    }    /**     * 得到柱状图(多条)     *     * @param barChartYs Y轴值     * @param barNames   柱状图名字     * @param barColors  柱状图颜色     * @return     */    private BarData getBarData(List<List<Float>> barChartYs, List<String> barNames, List<Integer> barColors) {        List<IBarDataSet> lists = new ArrayList<>();        for (int i = 0; i < barChartYs.size(); i++) {            ArrayList<BarEntry> entries = new ArrayList<>();            for (int j = 0; j < barChartYs.get(i).size(); j++) {                entries.add(new BarEntry(j, barChartYs.get(i).get(j)));            }            BarDataSet barDataSet = new BarDataSet(entries, barNames.get(i));            barDataSet.setColor(barColors.get(i));            barDataSet.setValueTextColor(barColors.get(i));            barDataSet.setValueTextSize(10f);            barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);            lists.add(barDataSet);        }        BarData barData = new BarData(lists);        int amount = barChartYs.size(); //需要显示柱状图的类别 数量        float groupSpace = 0.12f; //柱状图组之间的间距        float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet        float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet        // (0.2 + 0.02) * 4 + 0.12 = 1.00 即100% 按照百分百布局        //柱状图宽度        barData.setBarWidth(barWidth);        //(起始点、柱状图组间距、柱状图之间间距)        barData.groupBars(0, groupSpace, barSpace);        return barData;    }    /**     * 显示混合图(柱状图+折线图)     *     * @param xAxisValues X轴坐标     * @param barChartY   柱状图Y轴值     * @param lineChartY  折线图Y轴值     * @param barName     柱状图名字     * @param lineName    折线图名字     * @param barColor    柱状图颜色     * @param lineColor   折线图颜色     */    public void showCombinedChart(            List<String> xAxisValues, List<Float> barChartY, List<Float> lineChartY            , String barName, String lineName, int barColor, int lineColor) {        initChart();        setXAxis(xAxisValues);        CombinedData combinedData = new CombinedData();        combinedData.setData(getBarData(barChartY, barName, barColor));        combinedData.setData(getLineData(lineChartY, lineName, lineColor));        mCombinedChart.setData(combinedData);        mCombinedChart.invalidate();    }    /**     * 显示混合图(柱状图+折线图)     *     * @param xAxisValues X轴坐标     * @param barChartYs  柱状图Y轴值     * @param lineChartYs 折线图Y轴值     * @param barNames    柱状图名字     * @param lineNames   折线图名字     * @param barColors   柱状图颜色     * @param lineColors  折线图颜色     */    public void showCombinedChart(            List<String> xAxisValues, List<List<Float>> barChartYs, List<List<Float>> lineChartYs,            List<String> barNames, List<String> lineNames, List<Integer> barColors, List<Integer> lineColors) {        initChart();        setXAxis(xAxisValues);        CombinedData combinedData = new CombinedData();        combinedData.setData(getBarData(barChartYs, barNames, barColors));        combinedData.setData(getLineData(lineChartYs, lineNames, lineColors));        mCombinedChart.setData(combinedData);        mCombinedChart.invalidate();    }}

但是用到组合图的时候,遇到一个问题,就是一个组合图中柱状图可以设置group,但是对应的折线图只有一个值,这个问题github上也有人发过相应的issues,作者PhilJay本人说在3.0的版本中已经解决,但是也没看到例子。现在我采用的是一个比较蠢的方法,用几个第一个图的效果“拼”出所需的效果,假如你有其他更好的方法,或者如果有人会用所说的新属性的话,烦请告诉我一声,不胜感激。


参考资料

1、android开源图表库MPAndroidChart文档翻译(上)
2、Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用
3、Android之MPAndroidChart库使用说明(柱状图、折线图、饼图和组合图.)
4、MPAndroidChart 教程:开始 Getting Started(一)

阅读全文
0 0
原创粉丝点击