正如我们已经看到的,如何在Android中创建漂亮的条形图,但是如果我们必须在条形图中以组的形式表示数据,该怎么办。这样我们就可以在条形图中绘制一组数据。因此,我们将在本文的Android应用程序中创建组条形图。
我们将在本文中构建什么?
我们将构建一个简单的应用程序,在其中我们将在Android应用程序中显示包含多组数据的条形图。我们将在条形图中以组的形式显示数据。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。
分步实施
步骤1:创建一个新项目
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。
步骤2:添加依赖项和JitPack存储库
导航到Gradle脚本> build.gradle(Module:app)并将以下依赖项添加到“依赖项”部分。
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’
将JitPack存储库添加到您的构建文件中。将其添加到allprojects {}部分中存储库末尾的根build.gradle中。
allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}
添加此依赖项后,同步您的项目,现在我们将继续执行它。
步骤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;
}
}
现在运行您的应用程序,并查看该应用程序的输出。