美滋滋的數據可視化——使用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/zh-tw/n/247234.html