如何在 Android 中创建分组条形图?

androidapps/applicationsmobile development

信息可视化是当今移动应用程序的重要组成部分，它使用户能够快速直观地解读复杂数据。条形图是一种常用的信息可视化方法，用于比较不同类别或分组的数据。在本文中，我们将介绍如何使用著名的 MPAndroidChart 库在 Android 中创建分组条形图。MPAndroidChart 库提供了一套全面的实用功能和自定义选项，可用于在 Android 应用程序中创建智能且美观的图表。您可以使用此库构建组合条形图，该库以离散的块显示信息，从而简化比较和分析。

使用的方法

MPAndroidChart 库方法

MPAndroidChart 库方法

算法

导入必要的类和库 −

MPAndroidChart 库中的 BarChart
用于数据表示的 BarEntry、BarDataSet 和 BarData
用于设置条形组颜色的颜色

设置布局−

创建一个包含 BarChart 视图的布局 XML 文件来显示图表。

初始化条形图 −

在 Activity 的 onCreate 方法中，使用布局中的 ID 查找条形图。
配置条形图的所有必要属性，例如网格背景、轴标签或图例。

准备数据 −

创建BarEntry 对象用于表示每组条形的数据。
将 BarEntry 对象分组到单独的列表中，每个列表代表一个不同的组。

自定义每个组的外观 −

为每组条形创建 BarDataSet 对象。
使用 setColor 方法为每个条形数据集设置所需的颜色。

创建图表数据 −

创建一个 IBarDataSet 对象列表，并为每个对象添加 BarDataSet 对象组。
使用 IBarDataSet 对象列表创建 BarData 对象。

按如下方式设置图表数据 −

使用 setData 方法将 BarData 对象设置为 BarChart。

刷新图表 −

调用条形图上的 invalidate 方法刷新其外观并显示图表。

Xml 程序

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

	<!--Ui component for our bar chart-->
	<com.github.mikephil.charting.charts.BarChart
		android:id="@+id/idBarChart"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />

</RelativeLayout>

Java 程序

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.XAxis;
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.formatter.IndexAxisValueFormatter;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    // 条形图变量
    BarChart barChart;
    
    // 条形数据集变量
    BarDataSet barDataSet1, barDataSet2;
    
    // 用于存储条目的 ArrayList
    ArrayList barEntries;
    
    // 创建用于显示日期的字符串数组
   String[] days = new String[]{"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 初始化条形图变量
        barChart = findViewById(R.id.idBarChart);
        
        // 创建新的条形数据集
        barDataSet1 = new BarDataSet(getBarEntriesOne(), "第一个数据集");
        barDataSet1.setColor(getApplicationContext().getResources().getColor(R.color.purple_200));
        barDataSet2 = new BarDataSet(getBarEntriesTwo(), "第二个数据集");
        barDataSet2.setColor(Color.BLUE);
        
        // 将条形数据集添加到条形数据中
        BarData data = new BarData(barDataSet1, barDataSet2);
        
        // 将数据设置到条形图
        barChart.setData(data);
        
        // 移除条形图的描述标签
        barChart.getDescription().setEnabled(false);
        
        // 获取条形图的 x 轴
        XAxis xAxis = barChart.getXAxis();
        
        // 将值格式化器设置为 x 轴
        // 并将日期添加到 x 轴标签
        xAxis.setValueFormatter(new IndexAxisValueFormatter(days));
        
        // 设置条形图的中心轴标签
        xAxis.setCenterAxisLabels(true);
        
        // 将 x 轴的位置设置为底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        
        // 设置 x 轴标签的粒度
        xAxis.setGranularity(1);
        
        // 启用 x 轴的粒度
        xAxis.setGranularityEnabled(true);
        
        // 使条形图可拖动
        barChart.setDragEnabled(true);
        
        // 设置条形图的可见范围
        barChart.setVisibleXRangeMaximum(3);
        
        // 为图表添加条形空间
        float barSpace = 0.1f;
        
        // 为图表添加组间距
        float groupSpace = 0.5f;
        
        // 设置条形宽度
        data.setBarWidth(0.15f);
        
        // 设置图表的最小轴值
        barChart.getXAxis().setAxisMinimum(0);
        
        // 为图表添加动画效果
        barChart.animate();
        
        // 对条形进行分组并添加间距
        barChart.groupBars(0, groupSpace, barSpace);
        
        // 使条形图无效
        barChart.invalidate();
   }

    // 用于第一组条形条目的 ArrayList
    private ArrayList<BarEntry> getBarEntriesOne() {
        // 创建新的 ArrayList
        barEntries = new ArrayList<>();
        
        // 将条目添加到第一组条形条目的 ArrayList
        barEntries.add(new BarEntry(1f, 4));
        barEntries.add(new BarEntry(2f, 6));
        barEntries.add(new BarEntry(3f, 8));
        barEntries.add(new BarEntry(4f, 2));
        barEntries.add(new BarEntry(5f, 4));
        barEntries.add(new BarEntry(6f, 1));
        
        return barEntries;
   }

    // 用于第二组条形条目的 ArrayList
    private ArrayList<BarEntry> getBarEntriesTwo() {
        // 创建新的 ArrayList
        barEntries = new ArrayList<>();
        
        // 将条目添加到第二组条形条目的 ArrayList
        barEntries.add(new BarEntry(1f, 8));
        barEntries.add(new BarEntry(2f, 12));
        barEntries.add(new BarEntry(3f, 4));
        barEntries.add(new BarEntry(4f, 1));
        barEntries.add(new BarEntry(5f, 7));
        barEntries.add(new BarEntry(6f, 3));
        
        return barEntries;
    }
}

输出

总结

本教程中，我们讲解了使用 MPAndroidChart 库构建分组条形图所需的步骤。我们讨论了如何初始化 BarChart、如何通过为每个组生成 BarEntry 对象来准备数据，以及如何使用 BarDataSet 对象自定义每个组的外观。然后，我们讲解了如何通过将 BarDataSet 对象合并为 BarData 对象并将其赋值给 BarChart 来生成图表数据。此外，我们还强调了刷新图表以反映数据变化的必要性，并提供了如何使用 invalidate 方法进行刷新的说明。