如何在Android中建立分組條形圖？

---

資訊視覺化是現代移動應用程式中一個重要的組成部分，它允許使用者快速直觀地理解複雜資料。條形圖是一種常用的資料視覺化方法，用於比較不同類別或分組中的資料。在本文中，我們將學習如何使用著名的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 {

   // Variable for the bar chart
   BarChart barChart;

   // Variables for bar data sets
   BarDataSet barDataSet1, barDataSet2;

   // ArrayList for storing entries
   ArrayList<BarEntry> barEntries;

   // Creating a string array for displaying days
   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);

      // Initializing the variable for the bar chart
      barChart = findViewById(R.id.idBarChart);

      // Creating a new bar data set
      barDataSet1 = new BarDataSet(getBarEntriesOne(), "First Set");
      barDataSet1.setColor(getApplicationContext().getResources().getColor(R.color.purple_200));
      barDataSet2 = new BarDataSet(getBarEntriesTwo(), "Second Set");
      barDataSet2.setColor(Color.BLUE);

      // Adding bar data sets to the bar data
      BarData data = new BarData(barDataSet1, barDataSet2);

      // Setting the data to the bar chart
      barChart.setData(data);

      // Removing the description label of the bar chart
      barChart.getDescription().setEnabled(false);

      // Getting the x-axis of the bar chart
      XAxis xAxis = barChart.getXAxis();

      // Setting value formatter to the x-axis
      // and adding the days to the x-axis labels
      xAxis.setValueFormatter(new IndexAxisValueFormatter(days));

      // Setting center axis labels for the bar chart
      xAxis.setCenterAxisLabels(true);

      // Setting the position of the x-axis to bottom
      xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

      // Setting granularity for the x-axis labels
      xAxis.setGranularity(1);

      // Enabling granularity for the x-axis
      xAxis.setGranularityEnabled(true);

      // Making the bar chart draggable
      barChart.setDragEnabled(true);

      // Setting the visible range for the bar chart
      barChart.setVisibleXRangeMaximum(3);

      // Adding bar space to the chart
      float barSpace = 0.1f;

      // Adding group spacing to the chart
      float groupSpace = 0.5f;

      // Setting the width of the bars
      data.setBarWidth(0.15f);

      // Setting the minimum axis value for the chart
      barChart.getXAxis().setAxisMinimum(0);

      // Animating the chart
      barChart.animate();

      // Grouping bars and adding spacing to them
      barChart.groupBars(0, groupSpace, barSpace);

      // Invalidating the bar chart
      barChart.invalidate();
   }

   // ArrayList for the first set of bar entries
   private ArrayList<BarEntry> getBarEntriesOne() {
      // Creating a new ArrayList
      barEntries = new ArrayList<>();

      // Adding entries to the ArrayList for the first set
      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 for the second set of bar entries
   private ArrayList<BarEntry> getBarEntriesTwo() {
      // Creating a new ArrayList
      barEntries = new ArrayList<>();

      // Adding entries to the ArrayList for the second set
      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方法執行此操作的說明。