again the best MPchart and hellochart from the Internet, which came out in the same year. earlier than hellochaet. To be honest, it can be used, the customization is powerful, and the simple table is also very easy.
The performance of BUT is average. We all know that when using View, it is not smooth or there is a sense of stuttering. I just want to .. smash something! (You must know that I can't tolerate less than 60fps) But while hellochart is beautiful, I can give more than 95 points for zooming + sliding. ,, especially the smooth change processing of the coordinate axis, I feel that Hellochart can't be any better! Let me boast, after all, it won my heart~~
Summary: If you need a lot of functions, various combinations, or displays, and you don’t have much requirements for the interface, choose MPchart.
If what you need is to meet the basic chart functions, but also to take into account the aesthetics and fluency, hellochart is strongly recommended.
HelloCharts now supports the following chart types:
Line chart(cubic lines, filled lines, scattered points) (line chart)
Column chart(grouped, stacked, negative values) (column chart)
Pie chart (pie chart)
Bubble chart (bubble chart) )
Combo chart (columns/lines) (combination of column chart and line chart)
Preview charts (for column chart and line chart) (preview chart is the most powerful function, I haven't used it yet, see the picture below)
I can only say "Heavenly Axe Magic" for such effects and interfaces.
OK after the gossip, let's see how to use it.
First add libs:
hellocharts-library-1.5.8.jar
gives the address: https://github.com/lecho/hellocharts-android
Down, add the layout to XML.
<bed.lib.hellocharts.view.LineChartView
android:id="@+id/line_chart"
android:layout_width="fill_parent"
android:layout_height="300dp"/>
Then one is the abscissa and one is the array of data points.
private LineChartView lineChart;
String[] date = {"10-22","11-22","12-22","1-22","6-22","5-23","5-22","6-22","5-23","5-22"};//X轴的标注
int[] score= {50,42,90,33,10,74,22,18,79,20};//Data points of the chart
private List<PointValue> mPointValues = new ArrayList<PointValue>();
private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
Down to the 3 methods in oncreate:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
lineChart = (LineChartView) findViewById (R.id.line_chart);
getAxisXLables();//Get the label of the x-axis
getAxisPoints();//Get the coordinate points
initLineChart();//Initialization
}
/**
* Set the display of the X axis
*/
private void getAxisXLables(){
for (int i = 0; i < date.length; i++) {
mAxisXValues.add(new AxisValue(i).setLabel(date[i]));
}
}
/**
* Display of each point of the chart
*/
private void getAxisPoints(){
for (int i = 0; i < weather.length; i++) {
mPointValues.add(new PointValue(i, weather[i]));
}
private void initLineChart(){
Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41")); //The color of the polyline (orange)
List<Line> lines = new ArrayList<Line>();
line.setShape(ValueShape.CIRCLE);//The shape of each data point on the line chart is a circle here (there are three types: ValueShape.SQUARE ValueShape.CIRCLE ValueShape.DIAMOND)
line.setCubic(false);//Whether the curve is smooth, that is, a curve or a polyline
line.setFilled(false);//Whether to fill the area of the curve
line.setHasLabels(true);//Whether the data coordinates of the curve are remarked
// line.setHasLabelsOnlyForSelected(true);//Click the data coordinates to prompt the data (if this line.setHasLabels(true); is set, it is invalid)
line.setHasLines(true);//Whether to display with lines. If false, no curves and only points are displayed
line.setHasPoints(true);//Whether to display the dots, if it is false, there is no origin, only the dots are displayed (each data point is a big dot)
lines.add(line);
LineChartData data = new LineChartData ();
data.setLines(lines);
//Axis
Axis axisX = new Axis(); //X axis
axisX.setHasTiltedLabels(true); //Whether the X axis font is displayed obliquely or straight, true is displayed obliquely
axisX.setTextColor(Color.WHITE); //Set the font color
//axisX.setName("date"); //table name
axisX.setTextSize(10);//Set the font size
axisX.setMaxLabelChars(8); //At most several X-axis coordinates, which means that your zooming makes the number of data on the X-axis 7<=x<=mAxisXValues.length
axisX.setValues(mAxisXValues); //Fill the coordinate name of the X axis
data.setAxisXBottom(axisX); //x axis is at the bottom
//data.setAxisXTop(axisX); //x axis is at the top
axisX.setHasLines(true); //x axis dividing line
// The Y axis is automatically set the upper limit of the Y axis according to the size of the data (I will give a solution to fix the number of Y axis data below)
Axis axisY = new Axis(); //Y轴
axisY.setName("");//y axis label
axisY.setTextSize(10);//Set the font size
data.setAxisYLeft(axisY); //The Y axis is set to the left
//data.setAxisYRight(axisY); //y axis is set to the right
//Set behavior properties, support zooming, sliding and panning
lineChart.setInteractive(true);
lineChart.setZoomType (ZoomType.HORIZONTAL);
lineChart.setMaxZoom((float) 2);//Maximum method scale
lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
lineChart.setLineChartData (data);
lineChart.setVisibility(View.VISIBLE);
/**Note: The following 7 and 10 just represent a number for analogy
* At that time, it was to solve the fixed number of X-axis data. See (http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2);
*/
Viewport v = new Viewport(lineChart.getMaximumViewport());
v.left = 0;
v.right= 7;
lineChart.setCurrentViewport (v);
}
Viewport v = new Viewport(lineChart.getMaximumViewport());
v.left = 0;
v.right= 7;
lineChart.setCurrentViewport (v);
These 4 lines of code can set the display number of X-axis data (x-axis 0-7 data),
1 When the number of data points is less than (29), shrink to the extreme hellochart defaults to all displays.
2 When the number of data points is greater than (29),
2.1 If the sentence axisX.setMaxLabelChars(int count) is not set, it will automatically adapt to the appropriate number of data that can be displayed on the X-axis.
2.2 If the sentence axisX.setMaxLabelChars(int count) is set, 33 data points are tested,
2.2.1 If the 10 in axisX.setMaxLabelChars(10); is greater than the 7 in v.right= 7;, then the X-axis displays 7 pieces of data at the beginning, and then the number of X-axis will be guaranteed to be greater than 7 and less than 10 when zooming.
2.2.2 If it is less than 7 in v.right= 7;, anyway, I feel that these two sentences seem to be invalid- -!
If v.right= 7; is not set here, the chart will display all the data as much as possible at the beginning, and the interactivity is too poor
Let's take a look at the solution for fixing the number of Y-axis:
Example: want to fix the Y-axis data from 0-100
Axis axisY = new Axis().setHasLines(true);
axisY.setMaxLabelChars(6);//max label length, for example 60
List<AxisValue> values = new ArrayList<>();
for(int i = 0; i < 100; i+= 10){
AxisValue value = new AxisValue(i);
String label = "";
value.setLabel(label);
values.add(value);
}
axisY.setValues(values);
It can be seen that as long as you divide the data according to the proportion yourself, it will be fine.
OK, that's basically it.
Source code github address: https://github.com/qht1003077897/hellocharts-line.git