Last night I talked to my friend about drawing a line, and then I drew a line chart with more strokes.
Take a look at the renderings first
So let’s do that
Let’s start with a fixed line chart
1. Draw an xy axis first.
Paint daxesPaint,axispointPaint,brokenLinePaint;
// Canvas width
canvasWidth = canvas.getWidth();
// Canvas height
canvasHeight = canvas.getHeight();
widthCriterion = canvasWidth /10; // Divide the canvas width into 10 parts
hightCriterion = canvasHeight /10; // Divide the canvas height into 10 parts
minCriterion = widthCriterion > hightCriterion ? hightCriterion /2: widthCriterion /2; // Draw the basis for the Angle of the xy axis
daxesPaint=new Paint();
daxesPaint.setColor(Color.BLACK);
daxesPaint.setAntiAlias(true); // Remove the serrated effect
daxesPaint.setStrokeWidth(7.0 f);// Brush width
// The first method is to draw the xy axis
drawDaxes(canvas,daxesPaint);
Copy the codeDrawDaxes are as follows:Copy the code private void drawDaxes(Canvas canvas,Paint p){
// Start y drawing frame
canvas.drawLine(widthCriterion,hightCriterion,widthCriterion,hightCriterion*9,p);
// Draw Angle Y
canvas.drawLine(widthCriterion-minCriterion,hightCriterion+minCriterion,widthCriterion+2,hightCriterion,p);
canvas.drawLine(widthCriterion,hightCriterion,widthCriterion+minCriterion2 -,hightCriterion+minCriterion,p);
// Start x drawing frame
canvas.drawLine(widthCriterion4 -,hightCriterion*9,widthCriterion*9,hightCriterion*9,p);
// Draw the x Angle
canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9-minCriterion,widthCriterion*9,hightCriterion*9+2,p);
canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9+minCriterion,widthCriterion*9,hightCriterion*92 -,p);
}
Copy the codeThe effect is as follows:
2. Draw the x and y coordinates * again
// Start drawing the xy coordinates
axispointPaint=daxesPaint;
drawAxispoint(canvas,axispointPaint);
Copy the codeThe drawAxispoint method is as follows
private void drawAxispoint(Canvas canvas,Paint p){
textFont=widthCriterion/5*2;
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );
p.setTextSize(textFont);
for (int i = 1; i <=8 ; i++) {
String text= String.valueOf(- 1+i);
int stringWidth = (int) p.measureText(text); // The text length
canvas.drawText(text, i*widthCriterion-stringWidth/2, hightCriterion*9+textFont, p);/ / draw the text
}
for (int i = 1; i <=7 ; i++) {
String text= String.valueOf(i);
int stringWidth = (int) p.measureText(text);
// The text length
canvas.drawText(text, widthCriterion-textFont, hightCriterion*9-i*hightCriterion+stringWidth/2, p);/ / draw the text}}Copy the codeThe renderings are as follows:
3. Finally, draw polylines and coordinate points
// Start drawing polylines and coordinate points
brokenLinePaint=axispointPaint;
brokenLinePaint.setStrokeWidth(5.0 f);
drawbrokenLine(canvas,brokenLinePaint);
Copy the codeDrawbrokenLine ();
private void drawbrokenLine(Canvas canvas,Paint p){
canvas.drawLine(widthCriterion,hightCriterion*9,widthCriterion*2,hightCriterion*2,p);
canvas.drawLine(widthCriterion*2,hightCriterion*2,widthCriterion*3,hightCriterion*5,p);
canvas.drawLine(widthCriterion*3,hightCriterion*5,widthCriterion*4,hightCriterion*7,p);
canvas.drawLine(widthCriterion*4,hightCriterion*7,widthCriterion*5,hightCriterion*6,p);
canvas.drawLine(widthCriterion*5,hightCriterion*6,widthCriterion*6,hightCriterion*7,p);
canvas.drawLine(widthCriterion*6,hightCriterion*7,widthCriterion*7,hightCriterion*2,p);
canvas.drawLine(widthCriterion*7,hightCriterion*2,widthCriterion*8,hightCriterion*3,p);
// Draw the points on the folding line
canvas.drawCircle(widthCriterion, hightCriterion*9.10, p);
canvas.drawCircle(widthCriterion*2,hightCriterion*2.10, p);
canvas.drawCircle(widthCriterion*3,hightCriterion*5.10, p);
canvas.drawCircle(widthCriterion*4,hightCriterion*7.10, p);
canvas.drawCircle(widthCriterion*5,hightCriterion*6.10, p);
canvas.drawCircle(widthCriterion*6,hightCriterion*7.10, p);
canvas.drawCircle(widthCriterion*7,hightCriterion*2.10, p);
canvas.drawCircle(widthCriterion*8,hightCriterion*3.10, p);
}
Copy the codeThe renderings are as follows:
Fixed line chart Java file as follows:
public class LineChartView extends View {
private int minCriterion;
private int hightCriterion;
private int widthCriterion;
private int canvasHeight;
private int canvasWidth;
private int textFont;
public LineChartView(Context context) {
super(context);
}
public LineChartView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawAxis(canvas);
}
/ / to draw
private void drawAxis(Canvas canvas){
Paint daxesPaint,axispointPaint,brokenLinePaint;
// Canvas width
canvasWidth = canvas.getWidth();
// Canvas height
canvasHeight = canvas.getHeight();
widthCriterion = canvasWidth /10; // Divide the canvas width into 10 parts
hightCriterion = canvasHeight /10; // Divide the canvas height into 10 parts
minCriterion = widthCriterion > hightCriterion ? hightCriterion /2: widthCriterion /2; // Draw the basis for the Angle of the xy axis
daxesPaint=new Paint();
daxesPaint.setColor(Color.BLACK);
daxesPaint.setAntiAlias(true); // Remove the serrated effect
daxesPaint.setStrokeWidth(7.0 f);// Brush width
// The first method is to draw the xy axis
drawDaxes(canvas,daxesPaint);
// Start drawing the xy coordinates
axispointPaint=daxesPaint;
drawAxispoint(canvas,axispointPaint);
// Start drawing polylines and coordinate points
brokenLinePaint=axispointPaint;
brokenLinePaint.setStrokeWidth(5.0 f);
drawbrokenLine(canvas,brokenLinePaint);
}
private void drawDaxes(Canvas canvas,Paint p){
// Start y drawing frame
canvas.drawLine(widthCriterion,hightCriterion,widthCriterion,hightCriterion*9,p);
// Draw Angle Y
canvas.drawLine(widthCriterion-minCriterion,hightCriterion+minCriterion,widthCriterion+2,hightCriterion,p);
canvas.drawLine(widthCriterion,hightCriterion,widthCriterion+minCriterion2 -,hightCriterion+minCriterion,p);
// Start x drawing frame
canvas.drawLine(widthCriterion4 -,hightCriterion*9,widthCriterion*9,hightCriterion*9,p);
// Draw the x Angle
canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9-minCriterion,widthCriterion*9,hightCriterion*9+2,p);
canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9+minCriterion,widthCriterion*9,hightCriterion*92 -,p);
}
private void drawAxispoint(Canvas canvas,Paint p){
textFont=widthCriterion/5*2;
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );
p.setTextSize(textFont);
for (int i = 1; i <=8 ; i++) {
String text= String.valueOf(- 1+i);
int stringWidth = (int) p.measureText(text); // The text length
canvas.drawText(text, i*widthCriterion-stringWidth/2, hightCriterion*9+textFont, p);/ / draw the text
}
for (int i = 1; i <=7 ; i++) {
String text= String.valueOf(i);
int stringWidth = (int) p.measureText(text);
// The text length
canvas.drawText(text, widthCriterion-textFont, hightCriterion*9-i*hightCriterion+stringWidth/2, p);/ / draw the text}}private void drawbrokenLine(Canvas canvas,Paint p){
canvas.drawLine(widthCriterion,hightCriterion*9,widthCriterion*2,hightCriterion*2,p);
canvas.drawLine(widthCriterion*2,hightCriterion*2,widthCriterion*3,hightCriterion*5,p);
canvas.drawLine(widthCriterion*3,hightCriterion*5,widthCriterion*4,hightCriterion*7,p);
canvas.drawLine(widthCriterion*4,hightCriterion*7,widthCriterion*5,hightCriterion*6,p);
canvas.drawLine(widthCriterion*5,hightCriterion*6,widthCriterion*6,hightCriterion*7,p);
canvas.drawLine(widthCriterion*6,hightCriterion*7,widthCriterion*7,hightCriterion*2,p);
canvas.drawLine(widthCriterion*7,hightCriterion*2,widthCriterion*8,hightCriterion*3,p);
// Draw the points on the folding line
canvas.drawCircle(widthCriterion, hightCriterion*9.10, p);
canvas.drawCircle(widthCriterion*2,hightCriterion*2.10, p);
canvas.drawCircle(widthCriterion*3,hightCriterion*5.10, p);
canvas.drawCircle(widthCriterion*4,hightCriterion*7.10, p);
canvas.drawCircle(widthCriterion*5,hightCriterion*6.10, p);
canvas.drawCircle(widthCriterion*6,hightCriterion*7.10, p);
canvas.drawCircle(widthCriterion*7,hightCriterion*2.10, p);
canvas.drawCircle(widthCriterion*8,hightCriterion*3.10, p); }}Copy the codeSo let’s just wrap it up a little bit
1. First provide the method of input data to the outside world:
public void setChartdate(String[] xdate, int[] ydate, float[] linedate) {
this.xdate = xdate; / / the x coordinate
this.ydate = ydate; / / y coordinates
this.linedate = linedate; // The position of the point on the Y-axis
}
Copy the code2. Make the judgment that the data is empty and out of bounds
if(xdate.length! =0&&ydate.length! =0&&linedate.length! =0&&xdate.length>=linedate.length){
if(yMaxdata()>=lineMaxdata()){ drawAxis(canvas); }}Copy the codeThe yMaxdata() and lineMaxdata() methods are used to take the maximum value of ydate and linedate
3. Connect all the written data with the data that is passed in.
private void drawDaxes(Canvas canvas, Paint p) {
// Start y drawing frame
canvas.drawLine(widthCriterion, hightCriterion, widthCriterion, hightCriterion * (yCopies - 1), p);
// Draw Angle Y
canvas.drawLine(widthCriterion - minCriterion, hightCriterion + minCriterion, widthCriterion + 2, hightCriterion, p);
canvas.drawLine(widthCriterion, hightCriterion, widthCriterion + minCriterion - 2, hightCriterion + minCriterion, p);
// Start x drawing frame
canvas.drawLine(widthCriterion - 4, hightCriterion * (yCopies - 1), widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1), p);
// Draw the x Angle
canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) - minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) + 2, p);
canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) + minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) - 2, p);
}
private void drawAxispoint(Canvas canvas, Paint p) {
textFont = widthCriterion / 5 * 2;
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface(font);
p.setTextSize(textFont);
// Draw the X-axis data
for (int i = 0; i < xdate.length; i++) {
String text = xdate[i];
int stringWidth = (int) p.measureText(text); // The text length
canvas.drawText(text, (i + 1) * widthCriterion - stringWidth / 2, hightCriterion * (yCopies - 1) + textFont, p);/ / draw the text
}
for (int i = 0; i < ydate.length; i++) {
String text = String.valueOf(ydate[i]);
int stringWidth = (int) p.measureText(text);
// The text length
if (i == 0) {}else {
canvas.drawText(text, widthCriterion - textFont-stringWidth, hightCriterion * (yCopies - 1) - i * hightCriterion + stringWidth / 2, p);/ / draw the text}}}private void drawbrokenLine(Canvas canvas, Paint p) {
float line=(hightCriterion * (yCopies - 1)-hightCriterion*2)/ydate[ydate.length- 1];
for (int i = 0; i <linedate.length; i++) {
float height=hightCriterion * (yCopies- 1)-line*linedate[i];
if(i! =linedate.length- 1) {float elseheight=hightCriterion * (yCopies- 1)-line*linedate[i+1];
canvas.drawLine(widthCriterion*(i+1),height , widthCriterion * (i+2), elseheight, p);
canvas.drawCircle(widthCriterion*(i+1), height, 10, p);
}else{
float endheight=hightCriterion * (yCopies- 1)-line*linedate[linedate.length- 1];
canvas.drawCircle(widthCriterion*(i+1), endheight, 10, p); }}}Copy the codeNow you can dynamically draw a simple line chart based on the data you are given
After you find the control in the Activity, call the control’s setChartdate() method; The data are as follows:
private String[] xdata={"0"."1"."2"."3"."4"."5"."6"."Seven"."8"};
private int[] yfata={0.10.20.30.40.50.60.70};
private float[] linedata={5.10.6.30.5.62.5 f.6.2};Copy the codeIncoming data:
linechartview.setChartdate(xdata,yfata,linedata);
Copy the codeThe renderings are as follows:
The Java code after encapsulation is as follows
public class LineChartView extends View {
private int minCriterion;
private int hightCriterion;
private int widthCriterion;
private int canvasHeight;
private int canvasWidth;
private int textFont;
private String[] xdate;
private int[] ydate;
private float[] linedate;
private int xCopies;
private float yCopies;
public void setChartdate(String[] xdate, int[] ydate, float[] linedate) {
this.xdate = xdate;
this.ydate = ydate;
this.linedate = linedate;
}
public LineChartView(Context context) {
super(context);
}
public LineChartView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(xdate.length! =0&&ydate.length! =0&&linedate.length! =0&&xdate.length>=linedate.length){
if(yMaxdata()>=lineMaxdata()){ drawAxis(canvas); }}}/ / to draw
private void drawAxis(Canvas canvas) {
xCopies = xdate.length + 2;
yCopies = ydate.length + 2;
Paint daxesPaint, axispointPaint, brokenLinePaint;
// Canvas width
canvasWidth = canvas.getWidth();
// Canvas height
canvasHeight = canvas.getHeight();
widthCriterion = canvasWidth / xCopies;
hightCriterion = (int) (canvasHeight / yCopies);
minCriterion = widthCriterion > hightCriterion ? hightCriterion / 2 : widthCriterion / 2;
// Start drawing the underlying background
daxesPaint = new Paint();
daxesPaint.setColor(Color.BLACK);
daxesPaint.setAntiAlias(true); // Remove the serrated effect
daxesPaint.setStrokeWidth(7.0 f);
drawDaxes(canvas, daxesPaint);
// Start drawing coordinate points
axispointPaint = daxesPaint;
drawAxispoint(canvas, axispointPaint);
// Start drawing polylines and their points
brokenLinePaint=axispointPaint;
brokenLinePaint.setStrokeWidth(5.0 f);
drawbrokenLine(canvas,brokenLinePaint);
}
private void drawDaxes(Canvas canvas, Paint p) {
// Start y drawing frame
canvas.drawLine(widthCriterion, hightCriterion, widthCriterion, hightCriterion * (yCopies - 1), p);
// Draw Angle Y
canvas.drawLine(widthCriterion - minCriterion, hightCriterion + minCriterion, widthCriterion + 2, hightCriterion, p);
canvas.drawLine(widthCriterion, hightCriterion, widthCriterion + minCriterion - 2, hightCriterion + minCriterion, p);
// Start x drawing frame
canvas.drawLine(widthCriterion - 4, hightCriterion * (yCopies - 1), widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1), p);
// Draw the x Angle
canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) - minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) + 2, p);
canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) + minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) - 2, p);
}
private void drawAxispoint(Canvas canvas, Paint p) {
textFont = widthCriterion / 5 * 2;
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface(font);
p.setTextSize(textFont);
// Draw the X-axis data
for (int i = 0; i < xdate.length; i++) {
String text = xdate[i];
int stringWidth = (int) p.measureText(text); // The text length
canvas.drawText(text, (i + 1) * widthCriterion - stringWidth / 2, hightCriterion * (yCopies - 1) + textFont, p);/ / draw the text
}
for (int i = 0; i < ydate.length; i++) {
String text = String.valueOf(ydate[i]);
int stringWidth = (int) p.measureText(text);
// The text length
if (i == 0) {}else {
canvas.drawText(text, widthCriterion - textFont-stringWidth, hightCriterion * (yCopies - 1) - i * hightCriterion + stringWidth / 2, p);/ / draw the text}}}private void drawbrokenLine(Canvas canvas, Paint p) {
float line=(hightCriterion * (yCopies - 1)-hightCriterion*2)/ydate[ydate.length- 1];
for (int i = 0; i <linedate.length; i++) {
float height=hightCriterion * (yCopies- 1)-line*linedate[i];
if(i! =linedate.length- 1) {float elseheight=hightCriterion * (yCopies- 1)-line*linedate[i+1];
canvas.drawLine(widthCriterion*(i+1),height , widthCriterion * (i+2), elseheight, p);
canvas.drawCircle(widthCriterion*(i+1), height, 10, p);
}else{
float endheight=hightCriterion * (yCopies- 1)-line*linedate[linedate.length- 1];
canvas.drawCircle(widthCriterion*(i+1), endheight, 10, p); }}}private float yMaxdata(a){
float max = 0;
for (int i = 0; i < ydate.length; i++) {
if(ydate[i] > max) { max = ydate[i]; }}return max;
}
private float lineMaxdata(a){
float max = 0;
for (int i = 0; i < linedate.length; i++) {
if(linedate[i] > max) { max = linedate[i]; }}returnmax; }}Copy the codeCore: draw and incoming data to produce a connection, it is recommended to draw a fixed, and then self-encapsulation, is beneficial to understanding
Welcome to leave your comments