美滋滋的数据可视化——使用mpchart实现

一、mpchart简介

mpchart是一款基于开源图表库“MPAndroidChart”开发的Android 绘图工具库。它的优点是使用方便、功能强大，支持多种类型的图表，并且支持详细的图表定制和交互效果

在使用mpchart之前，需要在项目的gradle配置文件中引入mpchart的依赖：

“`
dependencies {
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0-alpha’
}
“`

二、mpchart的使用

1.折线图的绘制

以下代码实现了一个简单的折线图的绘制，其中比较重要的参数和函数有：

LineChart：折线图的控件
setDescription：设置折线图的描述, 默认为“Description”
setTouchEnabled：是否可触摸，默认为true
setDragEnabled：是否可拖拽，默认为true
setScaleEnabled：是否可缩放，默认为true
setPinchZoom：是否同时缩放x、y轴，默认为false
getXAxis().setValueFormatter： X轴的数值格式化
getYAxis().setValueFormatter： Y轴的数值格式化
addDataEntry：添加数据
notifyDataSetChanged：通知数据集改变
animateXY：设置初始动画


public void setupLineChart(LineChart lineChart) {
        lineChart.setDescription("这是折线图的描述");
        lineChart.setTouchEnabled(true);
        lineChart.setDragEnabled(true);
        lineChart.setScaleEnabled(true);
        lineChart.setPinchZoom(false);

        XAxis xAxis = lineChart.getXAxis();
        // 设置X轴的数值格式
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return "Day " + (int) value;
            }
        });

        // 设置Y轴格式
        YAxis yAxis = lineChart.getAxisLeft();
        yAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + "元";
            }
        });


        List entries = new ArrayList();
        entries.add(new Entry(1, 23));
        entries.add(new Entry(2, 53));
        entries.add(new Entry(3, 31));
        entries.add(new Entry(4, 54));
        entries.add(new Entry(5, 75));

        LineDataSet lineDataSet = new LineDataSet(entries, "这是折线的描述");
        lineDataSet.setColor(Color.RED);
        lineDataSet.setCircleColor(Color.BLUE);
        lineDataSet.setLineWidth(2f);
        lineDataSet.setCircleRadius(4f);
        lineDataSet.setDrawCircles(true);
        lineDataSet.setDrawValues(true);

        LineData lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);
        lineChart.notifyDataSetChanged();
        lineChart.animateXY(2000, 2000);
    }

2.柱状图的绘制

以下代码实现了一个简单的柱状图的绘制，其中比较重要的参数和函数有：

BarChart：柱状图的控件
setDescription：设置柱状图的描述, 默认为“Description”
setTouchEnabled：是否可触摸，默认为true
setDragEnabled：是否可拖拽，默认为true
setScaleEnabled：是否可缩放，默认为true
setPinchZoom：是否同时缩放x、y轴，默认为false
XAxis： X轴参数设置
YAxis： Y轴参数设置
BarEntry：柱状图数据添加
notifyDataSetChanged：通知数据集改变
animateXY：设置初始动画


public void setupBarChart(BarChart barChart) {

        barChart.setDescription("这是柱状图的描述");
        barChart.setTouchEnabled(true);
        barChart.setDragEnabled(true);
        barChart.setScaleEnabled(true);
        barChart.setPinchZoom(false);

        XAxis xAxis = barChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(true);
        xAxis.setDrawLabels(true);

        YAxis leftAxis = barChart.getAxisLeft();
        leftAxis.setAxisMinValue(0f);
        leftAxis.setDrawGridLines(true);
        leftAxis.setDrawLabels(true);
        leftAxis.setDrawAxisLine(true);

        YAxis rightAxis = barChart.getAxisRight();
        rightAxis.setAxisMinValue(0f);
        rightAxis.setDrawGridLines(false);
        rightAxis.setDrawLabels(false);
        rightAxis.setDrawAxisLine(false);

        ArrayList entries1 = new ArrayList();
        entries1.add(new BarEntry(1, 69f));
        entries1.add(new BarEntry(2, 45f));
        entries1.add(new BarEntry(3, 87f));
        entries1.add(new BarEntry(4, 23f));
        entries1.add(new BarEntry(5, 56f));


        BarDataSet set1 = new BarDataSet(entries1, "这是第一组数据");
        set1.setColor(Color.rgb(104, 241, 175));
        set1.setValueTextSize(10f);

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

        BarData data = new BarData(dataSets);
        data.setValueFormatter(new LargeValueFormatter());
        barChart.setData(data);
        barChart.notifyDataSetChanged();
        barChart.animateXY(2000, 2000);
    }

3.饼状图的绘制

以下代码实现了一个简单的饼状图的绘制，其中比较重要的参数和函数有：

PieChart：饼状图的控件
setDescription：设置饼状图的描述, 默认为“Description”
setTouchEnabled：是否可触摸，默认为true
setDragEnabled：是否可拖拽，默认为true
setScaleEnabled：是否可缩放，默认为true
setPinchZoom：是否同时缩放x、y轴，默认为false
PieEntry：饼状图数据添加
notifyDataSetChanged：通知数据集改变
animateXY：设置初始动画


public void setupPieChart(PieChart pieChart) {
        pieChart.setDescription("这是饼状图的描述");
        pieChart.setTouchEnabled(true);
        pieChart.setDragEnabled(true);
        pieChart.setScaleEnabled(true);
        pieChart.setPinchZoom(false);

        ArrayList entries = new ArrayList();
        entries.add(new PieEntry(48, "1月"));
        entries.add(new PieEntry(23, "2月"));
        entries.add(new PieEntry(18, "3月"));
        entries.add(new PieEntry(25, "4月"));

        PieDataSet dataSet = new PieDataSet(entries, "这是饼状图的描述");
        ArrayList colors = new ArrayList();
        colors.add(Color.rgb(241, 77, 116));
        colors.add(Color.rgb(61, 165, 255));
        colors.add(Color.rgb(51, 204, 51));
        colors.add(Color.rgb(255, 204, 0));
        dataSet.setColors(colors);
        dataSet.setSliceSpace(3f);
        dataSet.setSelectionShift(5f);

        PieData pieData = new PieData(dataSet);
        pieData.setValueFormatter(new PercentFormatter());
        pieData.setValueTextSize(16f);
        pieData.setValueTextColor(Color.WHITE);

        pieChart.setData(pieData);
        pieChart.notifyDataSetChanged();
        pieChart.animateXY(2000, 2000);
    }

三、总结

本文介绍了mpchart工具库的使用方法，并且通过三个实例分别展示了折线图、柱状图和饼状图的绘制过程。掌握mpchart的使用可以帮助我们在开发中更加灵活地展示数据，并提高用户对数据的理解与认识。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247234.html