Yesterday night sky, today suddenly see the big Dipper falling, “Android line chart” emerged.




single.png




many.png

I. This paper adopts MPAndroidChart, which can be roughly divided into two steps:

1. Configure basic properties (including X and Y axes). 2Copy the code

Step 1: Configure the basic properties.

1. Rely on:

In the current engineering Build. Gradle: implementation 'com. Making. PhilJay: MPAndroidChart: v3.0.3' project Build. Gradle:  allprojects { repositories { maven { url "https://jitpack.io" } } }Copy the code

2. Configure the basic properties of the chart control:

Private void initChart() {linechart.getDescription ().setenabled (false); / / set to describe lineChart setTouchEnabled (true); / / set whether can touch lineChart setDragDecelerationFrictionCoef (0.9 f); Linechart. setDragEnabled(true); linechart. setDragEnabled(true); / / if you can drag-and-drop lineChart. SetScaleXEnabled (false); / / set the X axis will be amplified lineChart. SetScaleYEnabled (false); / / set the Y axis can enlarge / / lineChart setScaleEnabled (true); Can / / scaling of x and y axis, the default is true. LineChart setDrawGridBackground (false); / / set the chart background is displayed within the grid, the default is false. LineChart setHighlightPerDragEnabled (true); / / whether the towing line (data points and coordinates the prompt line), the default is true lineChart, setBackgroundColor (Color. WHITE); // Set the background color // configure the X-axis attribute xAxis = linechart.getxAxis (); //xAxis.setLabelRotationAngle(25f); / / set rotation offset xAxis. SetPosition (xAxis. XAxisPosition. BOTTOM); // Set the position of the X axis // set the text format of the label xaxis.settextSize (10f); // Set the label text Color xaxi.settextColor (color.rgb (255, 192, 56)); // Whether to draw axis xaxis.setdrawaxisline (true); // Whether to draw gridlines xaxis.setDrawGridlines (false); Xaxis.setgranularity (1f); // Set this parameter to one granularity per grid. If this parameter is not set, data on the X axis will be duplicated and blurred. // Configure the Y axis information leftAxis = linechart.getaxisleft (); leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); / / set the position of the Y axis leftAxis. SetDrawGridLines (true); / / set to the left of the grid lines show leftAxis setGranularityEnabled (false); // Enable the granularity feature that limits the Y-axis spacing when zooming. Default value: false. leftAxis.setTextColor(Color.rgb(255, 192, 56)); // Set the Y axis text color YAxis rightAxis = linechart.getaxisRight (); // Get the right Y axis rightax.setenabled (false); Legend = linechart.getLegend (); linechart.getLegend (); // Set the scale diagram legend. SetEnabled (false); }}}}}}}}}}}}}}}}}}}}}}}}}}}Copy the code

Step 2, set the broken line data.

First, customize our X-axis adapter:

public class MyXFormatter implements IAxisValueFormatter { private List<String> list; public MyXFormatter(List<String> values) { this.list = values; } private static final String TAG = "MyXFormatter"; @Override public String getFormattedValue(float value, AxisBase axis) { // "value" represents the position of the label on the axis (x or y) Log.d(TAG, "----->getFormattedValue: " + value) ; if (value<list.size()){ return list.get((int) (value)); }else { return null; }}}Copy the code

Then, set the broken line data. The data method of a single broken line is set as follows:

Private void setSingleDatas(int count) {// singleNameList = new ArrayList<>(); for (int i = 0; i < count; i++) { int j = i+1; Singlenamelist. add(j + "month "); } ValueFormatter MyXFormatter formatter = new MyXFormatter(singleNameList); xAxis.setValueFormatter(formatter); ArrayList<Entry> yList = new ArrayList<Entry>(); for (int i = 0; i < count; i++) { float value = (float) (Math.random()*100); yList.add(new Entry(i,value)); } LineDataSet LineDataSet = new LineDataSet(yList, "single line "); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); / / set the line properties lineDataSet. SetAxisDependency (YAxis. AxisDependency. LEFT); / / set both sides Y nodes describe lineDataSet. SetValueTextColor (ColorTemplate. GetHoloBlue ()); / / set the node text color lineDataSet. SetDrawCircles (false); / / Settings are display node dots lineDataSet. SetDrawValues (false); / / set the value of whether display node lineDataSet setHighLightColor (Color, RGB (244, 117, 117)); // When a node is clicked, two lines will appear horizontal and vertical to the node, which can be customized. This method is to set the line color lineDataSet. SetHighlightEnabled (true); // Set whether to display the crosshair lineDataSet. SetColor (color.blue); / / set the line Color lineDataSet. SetCircleColor (Color. WHITE); // Set the node's circle color lineDataSet. SetLineWidth (1f); / / set the line width lineDataSet setCircleRadius (4 f); / / set the circle size of each coordinate point lineDataSet. SetDrawCircleHole (false); / / whether the custom node the color of the circle, if it is false, the node to a single point of the same color, if it is true. You can set the color of the nodes of the circle lineDataSet setValueTextSize (9 f); // Sets the size (dp) of the value text of the data contained in the DataSets data object. / / set the line chart filled lineDataSet. SetDrawFilled (false); //Fill the following part of the line graph with a color. SetFillAlpha (65); / / / / set the filling area transparency, the default value is 85 lineDataSet setFillColor (ColorTemplate. GetHoloBlue ()); / / set the fill color lineDataSet. SetFormLineWidth (1 f); lineDataSet.setFormSize(15.f); dataSets.add(lineDataSet); LineData data = new LineData(dataSets); lineChart.setData(data); // Add data}Copy the code

The data setting method for multiple polylines is as follows:

Private void setManyDatas(int chartData, private void setManyDatas(int chartData, private void setManyDatas, private void setManyDatas) int count) { singleNameList = new ArrayList<>(); for (int i = 0; i < chartData; i++) { int j = i+1; Singlenamelist. add(j + "month "); } MyXFormatter formatter = new MyXFormatter(singleNameList); xAxis.setValueFormatter(formatter); initChartColors(); // Set the line color set initChartNames(count); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); For (int I = 0; i < count; I++) {ArrayList<Entry> yList = new ArrayList<Entry>(); for (int j = 0; j < chartData; j++) { float value = (float) (Math.random()*100); yList.add(new Entry(j,value)); } LineDataSet lineDataSet = new LineDataSet(yList, nameList.get(i)); / / set the attribute of a single line / / set lines lineDataSet. SetAxisDependency YAxis. AxisDependency. (LEFT); / / set both sides Y nodes describe lineDataSet. SetValueTextColor (ColorTemplate. GetHoloBlue ()); / / set the node text color lineDataSet. SetDrawCircles (false); / / Settings are display node dots lineDataSet. SetDrawValues (false); / / set the value of whether display node lineDataSet setHighLightColor (Color, RGB (244, 117, 117)); // When a node is clicked, two lines will appear horizontal and vertical to the node, which can be customized. This method is to set the line color lineDataSet. SetHighlightEnabled (true); SetColor (colours. Get (I)); / / set the line Color lineDataSet. SetCircleColor (Color. WHITE); // Set the node's circle color lineDataSet. SetLineWidth (1f); / / set the line width lineDataSet setCircleRadius (4 f); / / set the circle size of each coordinate point lineDataSet. SetDrawCircleHole (false); / / whether the custom node the color of the circle, if it is false, the node to a single point of the same color, if it is true. You can set the color of the nodes of the circle lineDataSet setValueTextSize (9 f); // Sets the size (dp) of the value text of the data contained in the DataSets data object. / / set the line chart filled lineDataSet. SetDrawFilled (false); //Fill the following part of the line graph with a color. SetFillAlpha (65); / / / / set the filling area transparency, the default value is 85 lineDataSet setFillColor (ColorTemplate. GetHoloBlue ()); / / set the fill color lineDataSet. SetFormLineWidth (1 f); lineDataSet.setFormSize(15.f); dataSets.add(lineDataSet); } LineData data = new LineData(dataSets); lineChart.setData(data); @param count */ private void initChartNames(int count) {nameList = new ArrayList<>(); for (int i = 0; i < count; i++) { int j = i+1; String name = "line" + j; nameList.add(name); Private void initChartColors() {colours = new ArrayList<>(); colours.add(Color.GREEN); colours.add(Color.BLUE); colours.add(Color.RED); colours.add(Color.CYAN); colours.add(Color.BLACK); colours.add(Color.GRAY); }Copy the code

From the code, I believe that it is not difficult to see that a single line and multiple lines of thought to achieve the wonderful. Both create an ArrayList<ILineDataSet> collection, add the LineDataSet object and set the properties. This collection is finally added by calling the chart object’s.setData() method via the LineData constructor.

Supplement:

Legend, that’s what this is




image.png

It’s better to define it yourself, just call it GirdView. It can also auto-wrap, so nice. The official version is not much to say, ugly and has a problem with wrap.

Three. Step on the pit:

1. Customize X-axis data. It is important to note that when customizing X-axis data and creating our own IAxisValueFormatter implementation class, it is important to set this X-axis property in advance:

Xaxis.setgranularity (1f);Copy the code

If this property is not set, the X-axis data will be duplicated and corrupted because the value in the getFormattedValue (float Value, AxisBase Axis) method of the IAxisValueFormatter implementation class is returned incorrectly.

2. Refresh data.

Call linechart.setData (data) once more if you implement your own chart control and have multiple types of data that need to be set repeatedly, and need to refresh the chart control if the X-axis is often displayed incorrectly. Methods.

At this point, the function of broken line chart has been realized. If you like it, you can follow MiHomes on wechat, and more and better blogs will be pushed to you later.




MiHomes.png

Ps: Welcome to point out deficiencies, will be corrected