📜  如何在Android中创建散点图以表示数据?

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

如果您要显示大量数据,并且正在寻找其他用户界面设计来表示这种类型的视图。然后,您可以使用散点图表示此视图。散点图用于表示数据。通过使用此散点图,您可以轻松地以分散形式表示数据。在本文中,我们将看到Android中散点图的实现。

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

我们将构建一个简单的图表,其中将显示一个图表,其中将显示数据。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。

在Android示例GIF中创建散点图

散点图的重要属性

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)并将以下依赖项添加到“依赖项”部分。

添加此内容后,导航至build.gradle(项目),并在存储库部分中向其添加以下行。

步骤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();
    }
}

添加上述代码后,现在运行您的应用程序并查看该应用程序的输出。

输出:

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