MPAndroidChart的使用“套路”

MPAndroidChart的使用

MPAndroidChart的回顾具体使用套路(对柱状图的分析)基本参数的设置X轴的设置Y轴设置图例的设置数据的设置总结

MPAndroidChart的回顾

前面写过柱状图的使用,MPAndroidChart可以用于多种图表的展示。可以直接gitHub上查找并查看使用方法。
gitHub地址:https://github.com/PhilJay/MPAndroidChart

具体使用套路(对柱状图的分析)

使用的规律,不管是哪种图表,我都分为基本参数的设置X轴的设置Y轴的设置图例的设置数据的设置。对这几种设置完成后也就完成了。
官方文档也对这些进行了讲解。有使用文档和相关的api文档。

15c14f1b6a8bd615db9f34ed5c1fe716.png

点击使用文档进入

5fef98da78f44dc71661ec1d3ec6f9c6.png

基本参数的设置

我说的基本参数的设定是直接对Chart(所有图标类的基类)进行设置。

// 设置点击数值监听
        mChart.setOnChartValueSelectedListener(this);

        //设置阴影背景(无)
        mChart.setDrawBarShadow(false);
        // 设置数值是否在bar的上面
        mChart.setDrawValueAboveBar(true);

        mChart.setHighlightPerDragEnabled(false);

        // 设置描述说明
        mChart.getDescription().setEnabled(false);

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

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

        // 设置网格背景
        mChart.setDrawGridBackground(false);
X轴的设置

X轴可以是数字,也可以是字符串。一般X轴都表示一些“单位”或者一些类别

  • X轴的基本设置

// 对X轴数据的格式规定
        IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);

        // 获取到X轴的XAxis
        XAxis xAxis = mChart.getXAxis();
        // 设置位置
        xAxis.setPosition(XAxisPosition.BOTTOM);
        // 设置显示字体
        xAxis.setTypeface(mTfLight);
        // 是否显示X的网格线
        xAxis.setDrawGridLines(false);
        // 设置间隔
        xAxis.setGranularity(1f); // only intervals of 1 day
        // 初始显示多少个
        xAxis.setLabelCount(7);
        // 传入格式对象
        xAxis.setValueFormatter(xAxisFormatter);
  • X轴的数据格式
    自定义的格式,需要继承IAxisValueFormatter类。该类方法返回一个字符串。如果数值是数值,我们直接将回调的value格式化String就可以作为返回,当然也需要看自己的需求。在String getFormattedValue(float value, AxisBase axis)的方法体中重写自己的逻辑,返回字符串。

/**
 * Created by Philipp Jahoda on 20/09/15.
 * Custom formatter interface that allows formatting of
 * axis labels before they are being drawn.
 */
public interface IAxisValueFormatter
{

    /**
     * Called when a value from an axis is to be formatted
     * before being drawn. For performance reasons, avoid excessive calculations
     * and memory allocations inside this method.
     *
     * @param value the value to be formatted
     * @param axis  the axis the value belongs to
     * @return
     */
    String getFormattedValue(float value, AxisBase axis);
}
  • demo的自定义格式
    这是demo中提供的对Y轴的一个格式。以为X轴提供的一个自定义格式代码太长了。我就没有选它贴。

public class MyAxisValueFormatter implements IAxisValueFormatter
{

    private DecimalFormat mFormat;

    public MyAxisValueFormatter() {
        mFormat = new DecimalFormat("###,###,###,##0.0");
    }

    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        return mFormat.format(value) + "人";
    }
}
Y轴设置

Y轴的设置和X轴的设置一个样的。但是Y轴分了左右。Y轴一般都是数据的数量了,格式化后一般都加个数量单位。

// Y轴的左轴
        YAxis leftAxis = mChart.getAxisLeft();
        // Y轴的右轴
        YAxis rightAxis = mChart.getAxisRight();

        //leftAxis.setTypeface(mTfLight);
        leftAxis.setLabelCount(8, false);
        leftAxis.setValueFormatter(custom);
        leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
        leftAxis.setSpaceTop(15f);
        leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
图例的设置

图例是是对每一项的X数据进行说明的,可以设置位置方向。
下面是图例的基本设置,图例的文字是在设置数据的额时候更新的

Legend l = mChart.getLegend();
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        l.setDrawInside(false);
        l.setForm(LegendForm.SQUARE);
        l.setFormSize(9f);
        l.setTextSize(11f);
        l.setXEntrySpace(4f);
数据的设置

柱状图的数据形式,在BarEntry中存储,多组数据用List表示。接收数据用BarDataSet,然后设置进BarChart中

ArrayList yVals1 = new ArrayList();
BarDataSet set1;

        if (mChart.getData() != null &&
                mChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
            set1.setValues(yVals1);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(yVals1, "The year 2017");

            set1.setDrawIcons(false);

            // region 注释掉的颜色设置和Gradle的api不一致
//            set1.setColors(ColorTemplate.MATERIAL_COLORS);

            /*int startColor = ContextCompat.getColor(this, android.R.color.holo_blue_dark);
            int endColor = ContextCompat.getColor(this, android.R.color.holo_blue_bright);
            set1.setGradientColor(startColor, endColor);*/

            /*int startColor1 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
            int startColor2 = ContextCompat.getColor(this, android.R.color.holo_blue_light);
            int startColor3 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
            int startColor4 = ContextCompat.getColor(this, android.R.color.holo_green_light);
            int startColor5 = ContextCompat.getColor(this, android.R.color.holo_red_light);
            int endColor1 = ContextCompat.getColor(this, android.R.color.holo_blue_dark);
            int endColor2 = ContextCompat.getColor(this, android.R.color.holo_purple);
            int endColor3 = ContextCompat.getColor(this, android.R.color.holo_green_dark);
            int endColor4 = ContextCompat.getColor(this, android.R.color.holo_red_dark);
            int endColor5 = ContextCompat.getColor(this, android.R.color.holo_orange_dark);

            List gradientColors = new ArrayList<>();
            gradientColors.add(new GradientColor(startColor1, endColor1));
            gradientColors.add(new GradientColor(startColor2, endColor2));
            gradientColors.add(new GradientColor(startColor3, endColor3));
            gradientColors.add(new GradientColor(startColor4, endColor4));
            gradientColors.add(new GradientColor(startColor5, endColor5));*/

            // endregion

            /**
             * 设置颜色,设置进去后和柱状的颜色是一致的,理论上是多少种数据设置多少
             *   种颜色来区分
             */

            set1.setColors(ColorTemplate.MATERIAL_COLORS);

            ArrayList dataSets = new ArrayList();
            dataSets.add(set1);

            BarData data = new BarData(dataSets);
            data.setValueTextSize(10f);
            data.setValueTypeface(mTfLight);
            data.setBarWidth(0.9f);

            // 设置数据
            mChart.setData(data);

总结

demo通过上面的几步,一个图形也就基本可以了。在数据设置的时候,需要将你的数据类型抽取数据设置到BarEntry中,其他的图标也是这个方式套路。是在不懂多看几遍demo。跟着demo走,基本的功能都是可以完成的。当然,还有X轴和Y轴的动画,这个就看完档和demo。

一起进步

如果你觉得,我写的东西对你帮助,那我会觉得很开心。如果你觉得我写的东西还需要改进,我很想听到你的建议。让我们一起进步吧。

可以加入QQ群聊一起探讨:874424803,如果还没有关注,长按可以关注哦感谢您的支持。

14f1bc5b8e8cfd4e2ea3cefeea35f730.gif

相互探讨
共同进步

3088b64cc970ec151b0d434dbaa8072a.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值