如果您要显示大量数据,并且正在寻找其他用户界面设计来表示这种类型的视图。然后,您可以使用散点图表示此视图。散点图用于表示数据。通过使用此散点图,您可以轻松地以分散形式表示数据。在本文中,我们将看到Android中散点图的实现。
我们将在本文中构建什么?
我们将构建一个简单的图表,其中将显示一个图表,其中将显示数据。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。
散点图的重要属性
Attribute |
Uses |
---|---|
setDrawGridBackground | This method is use to set the background to the grid. |
setTouchEnabled | This method is used to enable gestures on our charts. |
setMaxHighlightDistance | Sets the maximum distance in screen dp a touch can be away from an entry to cause it to get highlighted. |
setDragEnabled | This method is used to enable and disable dragging. |
setScaleEnabled | This method is used to enable scaling. |
setMaxVisibleValueCount | Sets the number of maximum visible drawn values on the chart only active when setDrawValues() is enabled |
setPinchZoom | It is used to scale both the x and the y-axis with zoom. |
getLegend | This method is used to get the legend of the chart. |
getAxisLeft | Returns left y-axis object. |
getAxisRight | Returns right y-axis object. |
setDrawGridLines | This method is used to draw grid lines. |
setScatterShape | Sets the ScatterShape this DataSet should be drawn with. This will search for an available IShapeRenderer and set this renderer for the DataSet. |
setData | Sets new data objects for our chart. |
invalidate | This method is used to invalidate the view if the view is enabled. |
分步实施
步骤1:创建一个新项目
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。
第2步:将依赖项添加到build.gradle(Module:app)
导航到Gradle脚本> build.gradle(Module:app)并将以下依赖项添加到“依赖项”部分。
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’
添加此内容后,导航至build.gradle(项目),并在存储库部分中向其添加以下行。
allprojects {
repositories {
// add below line in repositories section
maven { url ‘https://jitpack.io’ }
google()
jcenter()
}
}
步骤3:使用activity_main.xml文件
转到activity_main.xml文件,并参考以下代码。以下是activity_main.xml文件的代码。
XML
Java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.ScatterChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.interfaces.datasets.IScatterDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// creating a variable for scatter chart
private ScatterChart chart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing our scatter chart.
chart = findViewById(R.id.chart1);
// below line is use to disable the description
// of our scatter chart.
chart.getDescription().setEnabled(false);
// below line is use to draw grid background
// and we are setting it to false.
chart.setDrawGridBackground(false);
// below line is use to set touch
// enable for our chart.
chart.setTouchEnabled(true);
// below line is use to set maximum
// highlight distance for our chart.
chart.setMaxHighlightDistance(50f);
// below line is use to set
// dragging for our chart.
chart.setDragEnabled(true);
// below line is use to set scale
// to our chart.
chart.setScaleEnabled(true);
// below line is use to set maximum
// visible count to our chart.
chart.setMaxVisibleValueCount(200);
// below line is use to set
// pinch zoom to our chart.
chart.setPinchZoom(true);
// below line we are getting
// the legend of our chart.
Legend l = chart.getLegend();
// after getting our chart
// we are setting our chart for vertical and horizontal
// alignment to top, right and vertical.
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.VERTICAL);
// below line is use for
// setting draw inside to false.
l.setDrawInside(false);
// below line is use to set
// offset value for our legend.
l.setXOffset(5f);
// below line is use to get
// y-axis of our chart.
YAxis yl = chart.getAxisLeft();
// below line is use to set
// minimum axis to our y axis.
yl.setAxisMinimum(0f);
// below line is use to get axis
// right of our chart
chart.getAxisRight().setEnabled(false);
// below line is use to get
// x axis of our chart.
XAxis xl = chart.getXAxis();
// below line is use to enable
// drawing of grid lines.
xl.setDrawGridLines(false);
// in below line we are creating an array list
// for each entry of our chart.
// we will be representing three values in our charts.
// below is the line where we are creating three
// lines for our chart.
ArrayList values1 = new ArrayList<>();
ArrayList values2 = new ArrayList<>();
ArrayList values3 = new ArrayList<>();
// on below line we are adding data to our charts.
for (int i = 0; i < 11; i++) {
values1.add(new Entry(i, (i * 2)));
}
// on below line we are adding
// data to our value 2
for (int i = 11; i < 21; i++) {
values2.add(new Entry(i, (i * 3)));
}
// on below line we are adding
// data to our 3rd value.
for (int i = 21; i < 31; i++) {
values3.add(new Entry(i, (i * 4)));
}
// create a data set and give it a type
ScatterDataSet set1 = new ScatterDataSet(values1, "Point 1");
// below line is use to set shape for our point on our graph.
set1.setScatterShape(ScatterChart.ScatterShape.SQUARE);
// below line is for setting color to our shape.
set1.setColor(ColorTemplate.COLORFUL_COLORS[0]);
// below line is use to create a new point for our scattered chart.
ScatterDataSet set2 = new ScatterDataSet(values2, "Point 2");
// for this point we are setting our shape to circle
set2.setScatterShape(ScatterChart.ScatterShape.CIRCLE);
// below line is for setting color to our point in chart.
set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL_COLORS[3]);
// below line is use to set hole
// radius to our point in chart.
set2.setScatterShapeHoleRadius(3f);
// below line is use to set color to our set.
set2.setColor(ColorTemplate.COLORFUL_COLORS[1]);
// in below line we are creating a third data set for our chart.
ScatterDataSet set3 = new ScatterDataSet(values3, "Point 3");
// inside this 3rd data set we are setting its color.
set3.setColor(ColorTemplate.COLORFUL_COLORS[2]);
// below line is use to set shape size
// for our data set of the chart.
set1.setScatterShapeSize(8f);
set2.setScatterShapeSize(8f);
set3.setScatterShapeSize(8f);
// in below line we are creating a new array list for our data set.
ArrayList dataSets = new ArrayList<>();
// in below line we are adding all
// data sets to above array list.
dataSets.add(set1); // add the data sets
dataSets.add(set2);
dataSets.add(set3);
// create a data object with the data sets
ScatterData data = new ScatterData(dataSets);
// below line is use to set data to our chart
chart.setData(data);
// at last we are calling
// invalidate method on our chart.
chart.invalidate();
}
}
步骤4:使用MainActivity。 Java文件
转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。
Java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.ScatterChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.interfaces.datasets.IScatterDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// creating a variable for scatter chart
private ScatterChart chart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing our scatter chart.
chart = findViewById(R.id.chart1);
// below line is use to disable the description
// of our scatter chart.
chart.getDescription().setEnabled(false);
// below line is use to draw grid background
// and we are setting it to false.
chart.setDrawGridBackground(false);
// below line is use to set touch
// enable for our chart.
chart.setTouchEnabled(true);
// below line is use to set maximum
// highlight distance for our chart.
chart.setMaxHighlightDistance(50f);
// below line is use to set
// dragging for our chart.
chart.setDragEnabled(true);
// below line is use to set scale
// to our chart.
chart.setScaleEnabled(true);
// below line is use to set maximum
// visible count to our chart.
chart.setMaxVisibleValueCount(200);
// below line is use to set
// pinch zoom to our chart.
chart.setPinchZoom(true);
// below line we are getting
// the legend of our chart.
Legend l = chart.getLegend();
// after getting our chart
// we are setting our chart for vertical and horizontal
// alignment to top, right and vertical.
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.VERTICAL);
// below line is use for
// setting draw inside to false.
l.setDrawInside(false);
// below line is use to set
// offset value for our legend.
l.setXOffset(5f);
// below line is use to get
// y-axis of our chart.
YAxis yl = chart.getAxisLeft();
// below line is use to set
// minimum axis to our y axis.
yl.setAxisMinimum(0f);
// below line is use to get axis
// right of our chart
chart.getAxisRight().setEnabled(false);
// below line is use to get
// x axis of our chart.
XAxis xl = chart.getXAxis();
// below line is use to enable
// drawing of grid lines.
xl.setDrawGridLines(false);
// in below line we are creating an array list
// for each entry of our chart.
// we will be representing three values in our charts.
// below is the line where we are creating three
// lines for our chart.
ArrayList values1 = new ArrayList<>();
ArrayList values2 = new ArrayList<>();
ArrayList values3 = new ArrayList<>();
// on below line we are adding data to our charts.
for (int i = 0; i < 11; i++) {
values1.add(new Entry(i, (i * 2)));
}
// on below line we are adding
// data to our value 2
for (int i = 11; i < 21; i++) {
values2.add(new Entry(i, (i * 3)));
}
// on below line we are adding
// data to our 3rd value.
for (int i = 21; i < 31; i++) {
values3.add(new Entry(i, (i * 4)));
}
// create a data set and give it a type
ScatterDataSet set1 = new ScatterDataSet(values1, "Point 1");
// below line is use to set shape for our point on our graph.
set1.setScatterShape(ScatterChart.ScatterShape.SQUARE);
// below line is for setting color to our shape.
set1.setColor(ColorTemplate.COLORFUL_COLORS[0]);
// below line is use to create a new point for our scattered chart.
ScatterDataSet set2 = new ScatterDataSet(values2, "Point 2");
// for this point we are setting our shape to circle
set2.setScatterShape(ScatterChart.ScatterShape.CIRCLE);
// below line is for setting color to our point in chart.
set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL_COLORS[3]);
// below line is use to set hole
// radius to our point in chart.
set2.setScatterShapeHoleRadius(3f);
// below line is use to set color to our set.
set2.setColor(ColorTemplate.COLORFUL_COLORS[1]);
// in below line we are creating a third data set for our chart.
ScatterDataSet set3 = new ScatterDataSet(values3, "Point 3");
// inside this 3rd data set we are setting its color.
set3.setColor(ColorTemplate.COLORFUL_COLORS[2]);
// below line is use to set shape size
// for our data set of the chart.
set1.setScatterShapeSize(8f);
set2.setScatterShapeSize(8f);
set3.setScatterShapeSize(8f);
// in below line we are creating a new array list for our data set.
ArrayList dataSets = new ArrayList<>();
// in below line we are adding all
// data sets to above array list.
dataSets.add(set1); // add the data sets
dataSets.add(set2);
dataSets.add(set3);
// create a data object with the data sets
ScatterData data = new ScatterData(dataSets);
// below line is use to set data to our chart
chart.setData(data);
// at last we are calling
// invalidate method on our chart.
chart.invalidate();
}
}
添加上述代码后,现在运行您的应用程序并查看该应用程序的输出。