自定義View,畫折線圖
阿新 • • 發佈:2019-01-09
最近學到畫折線圖,實現出來了,現在把程式碼貼出來,給大家點評,也給自己做個備忘
1,xml檔案中:
1,xml檔案中:
2,ChartView類中<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" > <com.example.linechartdemo.ChartView android:id="@+id/chartView1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
3,MainActivity中:package com.example.linechartdemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; public class ChartView extends View{ private int mXPoint = 100;//原點的X軸座標 private int mYPoint = 460;//原點的Y軸座標 private int mXScale = 45;//X軸的刻度長度 private int mYScale = 50;//Y軸的刻度長度 public int mXLength = 300;//X軸的長度 private int mYLength = 300;//Y軸的長度 private String[] mXLabel = null;//X軸上的刻度 private String[] mYLabel = null;//Y軸上的刻度 private String[] mData = null;//需要展示的資料 private String mTitle = null; public void SetInfo(String[] mXLable, String[] mYLable,String[] AllData,String strTitle) { mXLabel = mXLable; mYLabel = mYLable; mData = AllData; mTitle = strTitle; } public ChartView(Context context) { super(context); // TODO Auto-generated constructor stub } public ChartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO Auto-generated constructor stub } public ChartView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); Paint paint = new Paint(); paint.setStyle(Paint.Style.STROKE); paint.setAntiAlias(true);//去鋸齒 paint.setColor(Color.DKGRAY); paint.setTextSize(12); //設定Y軸 canvas.drawLine(mXPoint, mYPoint, mXPoint, mYPoint-mYLength, paint); //設定Y軸上的刻度顯示(如果沒有for迴圈,將只會是一個Y軸的直線) for(int i = 0;i*mYScale<mYLength;i++){ //畫刻度線 canvas.drawLine(mXPoint, mYPoint-i*mYScale, mXPoint+5, mYPoint-i*mYScale, paint);//刻度 try { //畫軸上的刻度值 canvas.drawText(mYLabel[i], mXPoint-24, mYPoint-i*mYScale+5,paint);//刻度 } catch (Exception e) { // TODO: handle exception } } canvas.drawLine(mXPoint, mYPoint-mYLength, mXPoint-3, mYPoint-mYLength+6, paint);//箭頭 canvas.drawLine(mXPoint, mYPoint-mYLength, mXPoint+3, mYPoint-mYLength+6, paint); //設定X軸 canvas.drawLine(mXPoint, mYPoint, mXPoint+mXLength, mYPoint, paint);//畫軸線 for(int i = 0;i*mXScale<mXLength;i++){ //畫刻度 canvas.drawLine(mXPoint+i*mXScale, mYPoint, mXPoint+i*mXScale, mYPoint - 5, paint); try { //畫刻度值 canvas.drawText(mXLabel[i], mXPoint+i*mXScale- 15, mYPoint+20, paint); } catch (Exception e) { // TODO: handle exception } } canvas.drawLine(mXPoint+mXLength, mYPoint, mXPoint+mXLength-6, mYPoint-3, paint);//箭頭 canvas.drawLine(mXPoint+mXLength, mYPoint, mXPoint+mXLength-6, mYPoint+3, paint); for(int i = 0;i*mXScale<mXLength;i++){ //資料值(兩點確定一條直線) if(i>0&&YCoord(mData[i-1])!=-999&&YCoord(mData[i])!=-999) //保證有效資料 //畫折線 canvas.drawLine(mXPoint+(i-1)*mXScale, YCoord(mData[i-1]), mXPoint+i*mXScale, YCoord(mData[i]), paint); paint.setColor(Color.RED); //畫兩線之間的轉折點 canvas.drawCircle(mXPoint+i*mXScale,YCoord(mData[i]), 2, paint); //設定圓點為實心的(這句話如果放在上面的任何地方,後面只要用到paint,顏色都會是紅色) paint.setStyle(Paint.Style.FILL); } //設定標題的內容,位置,字型大小 paint.setTextSize(16); canvas.drawText(mTitle, 200, 150, paint); } private int YCoord(String y0) //計算繪製時的Y座標,無資料時返回-999 { int y; try { y=Integer.parseInt(y0); } catch(Exception e) { return -999; //出錯則返回-999 } try { return mYPoint-y*mYScale/Integer.parseInt(mYLabel[1]); } catch(Exception e) { } return y; } }
package com.example.linechartdemo; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ChartView myView = new ChartView(this); myView = (ChartView) findViewById(R.id.chartView1); myView.SetInfo( new String[]{"第1周","第2周","第3周","第4周","第5周","第6周","第7周"}, //X軸刻度 new String[]{"","50","100","150","200","250"}, //Y軸刻度 new String[]{"15","32","134","211","55","40","66"}, //資料 "歷史記錄"); } }