首页手记 MPChart系列(一)

MPChart系列(一)

标签：

Android

先从如何引入来讲起,MPChart的项目主页是https://github.com/PhilJay/MPAndroidChart

项目的gradle得引入:

maven { url 'https://jitpack.io' }

app的build.gradle加上

compile 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'

在activity的xml中引入:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart1"
        android:layout_marginLeft="18dip"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="50dp"
        />

</RelativeLayout>

我们看一下最简单的一个柱形图怎么绘制:

横坐标是从0到5，纵坐标是3000，2000，5000，1000，6000，1500

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.activity_barchart);

    setTitle("AnotherBarActivity11");

    chart = (BarChart)findViewById(R.id.chart1);

    chart.getDescription().setEnabled(false);

    // if more than 60 entries are displayed in the chart, no values will be
    // drawn
    chart.setMaxVisibleValueCount(60);

    // scaling can now only be done on x- and y-axis separately
    chart.setPinchZoom(false);

    chart.setDrawBarShadow(false);
    chart.setDrawGridBackground(false);

    XAxis xAxis = chart.getXAxis();
    xAxis.setPosition(XAxisPosition.BOTTOM);
    xAxis.setDrawGridLines(false);

    YAxis yAxis = chart.getAxisLeft();
    yAxis.setDrawGridLines(false);
    yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);       //y轴的数值显示在外侧
    yAxis.setAxisMinimum(0f); ////为这个轴设置一个自定义的最小值。如果设置,这个值不会自动根据所提供的数据计算
    chart.getAxisRight().setEnabled(false);
    chart.getAxisLeft().setDrawGridLines(false);

    // add a nice and smooth animation
    //chart.animateY(1500);

    initData();

    chart.getLegend().setEnabled(false);
    chart.setScaleYEnabled(false);
    chart.setScaleXEnabled(false);
}


private void initData() {
    ArrayList<BarEntry> values = new ArrayList<>();
    for(int i=0;i<7;i++) {
        float val = 0;
        if(i == 0) {
            val = 3000;
        }else if(i == 1) {
            val = 2000;
        }else if(i == 2) {
            val = 5000;
        }else if(i == 3) {
            val = 1000;
        }else if(i == 4) {
            val = 6000;
        }else if(i == 5) {
            val = 1500;
        }
        values.add(new BarEntry(i, val));
    }
    BarDataSet set1;

    if (chart.getData() != null &&
            chart.getData().getDataSetCount() > 0) {
        set1 = (BarDataSet) chart.getData().getDataSetByIndex(0);
        set1.setValues(values);
        chart.getData().notifyDataChanged();
        chart.notifyDataSetChanged();
    } else {
        set1 = new BarDataSet(values, "Data Set");
        set1.setColors(ColorTemplate.VORDIPLOM_COLORS);
        set1.setDrawValues(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<>();
        dataSets.add(set1);

        BarData data = new BarData(dataSets);
        chart.setData(data);
        chart.setFitBars(true);
    }

    chart.invalidate();
}

我们来解释关键的几句话:

yAxis.setAxisMinimum(0f); ////为这个轴设置一个自定义的最小值。如果设置,这个值不会自动根据所提供的数据计算

设置y轴从0开始

yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);       //y轴的数值显示在外侧

y轴的数值显示在外侧

chart.getAxisRight().setEnabled(false);

图表的右侧不显示y轴

yAxis.setDrawGridLines(false);

y轴不显示网格线

chart.setScaleYEnabled(false);
chart.setScaleXEnabled(false);

图表x和y方向不能用手指放大和缩小

ArrayList<BarEntry> values = new ArrayList<>();
for(int i=0;i<7;i++) {
    float val = 0;
    if(i == 0) {
        val = 3000;
    }else if(i == 1) {
        val = 2000;
    }else if(i == 2) {
        val = 5000;
    }else if(i == 3) {
        val = 1000;
    }else if(i == 4) {
        val = 6000;
    }else if(i == 5) {
        val = 1500;
    }
    values.add(new BarEntry(i, val));
}

构造x轴和y轴的数据

如何把x轴变成自定义的标签呢:

private void initData() {
    ArrayList<BarEntry> values = new ArrayList<>();
    final ArrayList<String> xLabelValue = new ArrayList<>();

    for(int i=0;i<7;i++) {
        xLabelValue.add((i+1)+"月份");
    }


    for(int i=0;i<7;i++) {
        float val = 0;
        if(i == 0) {
            val = 3000;
        }else if(i == 1) {
            val = 2000;
        }else if(i == 2) {
            val = 5000;
        }else if(i == 3) {
            val = 1000;
        }else if(i == 4) {
            val = 6000;
        }else if(i == 5) {
            val = 1500;
        }
        values.add(new BarEntry(i, val));
    }
    BarDataSet set1;

    if (chart.getData() != null &&
            chart.getData().getDataSetCount() > 0) {
        set1 = (BarDataSet) chart.getData().getDataSetByIndex(0);
        set1.setValues(values);
        chart.getData().notifyDataChanged();
        chart.notifyDataSetChanged();
    } else {
        set1 = new BarDataSet(values, "Data Set");
        set1.setColors(ColorTemplate.VORDIPLOM_COLORS);
        set1.setDrawValues(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<>();
        dataSets.add(set1);

        xLabels.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return xLabelValue.get((int) v);
            }
        });


        BarData data = new BarData(dataSets);
        chart.setData(data);
        chart.setFitBars(true);
    }

    chart.invalidate();
}

如何让BarChart的圆柱体包含两部分内容呢:

private void initData() {
    ArrayList<BarEntry> values = new ArrayList<>();
    final ArrayList<String> xLabelValue = new ArrayList<>();

    for(int i=0;i<7;i++) {
        xLabelValue.add((i+1)+"月份");
    }


    for(int i=0;i<7;i++) {
        float[] val = new float[2];
        if(i == 0) {
            val[1] = 2000;
            val[0] = 1000;
        }else if(i == 1) {
            val[1] = 1500;
            val[0] = 500;
        }else if(i == 2) {
            val[1] = 3000;
            val[0] = 2000;
        }else if(i == 3) {
            val[1] = 700;
            val[0] = 300;
        }else if(i == 4) {
            val[1] = 5100;
            val[0] = 900;
        }else if(i == 5) {
            val[1] = 1300;
            val[0] = 200;
        }
        values.add(new BarEntry(i, val));
    }
    BarDataSet set1;

    if (chart.getData() != null &&
            chart.getData().getDataSetCount() > 0) {
        set1 = (BarDataSet) chart.getData().getDataSetByIndex(0);
        set1.setValues(values);
        chart.getData().notifyDataChanged();
        chart.notifyDataSetChanged();
    } else {
        set1 = new BarDataSet(values, "Data Set");
        set1.setColors(ColorTemplate.VORDIPLOM_COLORS);
        set1.setDrawValues(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<>();
        dataSets.add(set1);

        xLabels.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return xLabelValue.get((int) v);
            }
        });


        BarData data = new BarData(dataSets);
        chart.setData(data);
        chart.setFitBars(true);
    }

    chart.invalidate();
}

val[0]表示圆柱体的第一部分的数值，val[1]表示圆柱体第二部分的数值

如果想让y轴也加上自定义标签，那么

那么加上这一句:

//左侧Y轴自定义值
leftAxis.setValueFormatter(new IAxisValueFormatter() {
    @Override
    public String getFormattedValue(float v, AxisBase axisBase) {
        return (int)v+"元";
    }
});

点击查看更多内容