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

📅  最后修改于: 2021-05-10 14:11:59             🧑  作者: Mango

正如我们已经看到的,如何在Android中创建漂亮的条形图,但是如果我们必须在条形图中以组的形式表示数据,该怎么办。这样我们就可以在条形图中绘制一组数据。因此,我们将在本文的Android应用程序中创建组条形图。

我们将在本文中构建什么?

我们将构建一个简单的应用程序,在其中我们将在Android应用程序中显示包含多组数据的条形图。我们将在条形图中以组的形式显示数据。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。

在Android示例GIF中创建组条形图

分步实施

步骤1:创建一个新项目

要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。

步骤2:添加依赖项和JitPack存储库

导航到Gradle脚本> build.gradle(Module:app)并将以下依赖项添加到“依赖项”部分。

将JitPack存储库添加到您的构建文件中。将其添加到allprojects {}部分中存储库末尾的根build.gradle中。

添加此依赖项后,同步您的项目,现在我们将继续执行它。

步骤3:使用activity_main.xml文件

导航到应用程序> res>布局> activity_main.xml,然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。

XML


  
    
    
  


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 our bar chart
    BarChart barChart;
      
    // variable for our bar data set.
    BarDataSet barDataSet1, barDataSet2;
      
    // array list for storing entries.
    ArrayList barEntries;
      
    // creating a string array for displaying days.
    String[] days = new String[]{"Sunday", "Monday", "Tuesday", "Thursday", "Friday", "Saturday"};
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing variable for 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);
          
        // below line is to add bar data set to our bar data.
        BarData data = new BarData(barDataSet1, barDataSet2);
          
        // after adding data to our bar data we
        // are setting that data to our bar chart.
        barChart.setData(data);
          
        // below line is to remove description
        // label of our bar chart.
        barChart.getDescription().setEnabled(false);
          
        // below line is to get x axis 
        // of our bar chart.
        XAxis xAxis = barChart.getXAxis();
          
        // below line is to set value formatter to our x-axis and 
        // we are adding our days to our x axis.
        xAxis.setValueFormatter(new IndexAxisValueFormatter(days));
          
        // below line is to set center axis 
        // labels to our bar chart.
        xAxis.setCenterAxisLabels(true);
          
        // below line is to set position 
        // to our x-axis to bottom.
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
          
        // below line is to set granularity 
        // to our x axis labels.
        xAxis.setGranularity(1);
          
        // below line is to enable 
        // granularity to our x axis.
        xAxis.setGranularityEnabled(true);
          
        // below line is to make our 
        // bar chart as draggable.
        barChart.setDragEnabled(true);
          
        // below line is to make visible
        // range for our bar chart.
        barChart.setVisibleXRangeMaximum(3);
          
        // below line is to add bar
        // space to our chart.
        float barSpace = 0.1f;
          
        // below line is use to add group
        // spacing to our bar chart.
        float groupSpace = 0.5f;
          
        // we are setting width of 
        // bar in below line.
        data.setBarWidth(0.15f);
          
        // below line is to set minimum 
        // axis to our chart.
        barChart.getXAxis().setAxisMinimum(0);
          
        // below line is to 
        // animate our chart.
        barChart.animate();
          
        // below line is to group bars
        // and add spacing to it.
        barChart.groupBars(0, groupSpace, barSpace);
          
        // below line is to invalidate
        // our bar chart.
        barChart.invalidate();
    }
  
    // array list for first set
    private ArrayList getBarEntriesOne() {
          
        // creating a new array list
        barEntries = new ArrayList<>();
          
        // adding new entry to our array list with bar
        // entry and passing x and y axis value to it.
        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;
    }
  
    // array list for second set.
    private ArrayList getBarEntriesTwo() {
          
        // creating a new array list
        barEntries = new ArrayList<>();
          
        // adding new entry to our array list with bar 
        // entry and passing x and y axis value to it.
        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;
    }
}


步骤4:使用MainActivity。 Java文件

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。

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 our bar chart
    BarChart barChart;
      
    // variable for our bar data set.
    BarDataSet barDataSet1, barDataSet2;
      
    // array list for storing entries.
    ArrayList barEntries;
      
    // creating a string array for displaying days.
    String[] days = new String[]{"Sunday", "Monday", "Tuesday", "Thursday", "Friday", "Saturday"};
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing variable for 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);
          
        // below line is to add bar data set to our bar data.
        BarData data = new BarData(barDataSet1, barDataSet2);
          
        // after adding data to our bar data we
        // are setting that data to our bar chart.
        barChart.setData(data);
          
        // below line is to remove description
        // label of our bar chart.
        barChart.getDescription().setEnabled(false);
          
        // below line is to get x axis 
        // of our bar chart.
        XAxis xAxis = barChart.getXAxis();
          
        // below line is to set value formatter to our x-axis and 
        // we are adding our days to our x axis.
        xAxis.setValueFormatter(new IndexAxisValueFormatter(days));
          
        // below line is to set center axis 
        // labels to our bar chart.
        xAxis.setCenterAxisLabels(true);
          
        // below line is to set position 
        // to our x-axis to bottom.
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
          
        // below line is to set granularity 
        // to our x axis labels.
        xAxis.setGranularity(1);
          
        // below line is to enable 
        // granularity to our x axis.
        xAxis.setGranularityEnabled(true);
          
        // below line is to make our 
        // bar chart as draggable.
        barChart.setDragEnabled(true);
          
        // below line is to make visible
        // range for our bar chart.
        barChart.setVisibleXRangeMaximum(3);
          
        // below line is to add bar
        // space to our chart.
        float barSpace = 0.1f;
          
        // below line is use to add group
        // spacing to our bar chart.
        float groupSpace = 0.5f;
          
        // we are setting width of 
        // bar in below line.
        data.setBarWidth(0.15f);
          
        // below line is to set minimum 
        // axis to our chart.
        barChart.getXAxis().setAxisMinimum(0);
          
        // below line is to 
        // animate our chart.
        barChart.animate();
          
        // below line is to group bars
        // and add spacing to it.
        barChart.groupBars(0, groupSpace, barSpace);
          
        // below line is to invalidate
        // our bar chart.
        barChart.invalidate();
    }
  
    // array list for first set
    private ArrayList getBarEntriesOne() {
          
        // creating a new array list
        barEntries = new ArrayList<>();
          
        // adding new entry to our array list with bar
        // entry and passing x and y axis value to it.
        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;
    }
  
    // array list for second set.
    private ArrayList getBarEntriesTwo() {
          
        // creating a new array list
        barEntries = new ArrayList<>();
          
        // adding new entry to our array list with bar 
        // entry and passing x and y axis value to it.
        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;
    }
}

现在运行您的应用程序,并查看该应用程序的输出。

输出:

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处,前往由我们的专家精心策划的指南,以使您立即做好行业准备!