Android實現繪制折線圖APP代碼

Posted on by

一.總體設計

1.尋找規律，公式化的生成坐標系。

2.將生成坐標系的關鍵參數設置為可自定義，從而可變的可以生成自己想要的坐標系。

3.將需要繪制的點繪制在坐標系中並生成折現圖。

二.具體模塊實現

1.坐標系的生成：

    public void chart(){
        imageView=(ImageView)findViewById(R.id.image);
        newb = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        canvasTemp = new Canvas(newb);
        //Canvas canvasTemp2=new Canvas(newb);
        canvasTemp.drawColor(Color.TRANSPARENT);
        p = new Paint();
        //防鋸齒
        p.setAntiAlias(true);
        p.setStyle(Paint.Style.STROKE);//STROKE,FILL
        p.setStrokeWidth(5);
        p.setColor(Color.LTGRAY);
        p.setTextAlign(Paint.Align.CENTER);
        p.setTextSize(40);
        p.setColor(Color.BLACK);
        p.setStyle(Paint.Style.FILL);//STROKE,FILL
        p.setStrokeWidth(2);
        p2=p;
        //繪制表格
        canvasTemp.drawText("0", startx1-10, starty1+30, p);//原點
        canvasTemp.drawLine(startx1,starty1, endx1+50,starty1,p);// 繪制x軸
        canvasTemp.drawText("x", endx1+50+10, starty1+35, p);  //標記x軸
        canvasTemp.drawLine(startx1,starty1, startx1,endy1-50,p);// 繪制y軸
        canvasTemp.drawText("y", startx1-15,endy1-50, p);  //標記y軸
        //繪制x y軸箭頭
        canvasTemp.drawLine(endx1+50,starty1, endx1+50-10,starty1-10,p);
        canvasTemp.drawLine(endx1+50,starty1, endx1+50-10,starty1+10,p);
        canvasTemp.drawLine(startx1,endy1-50, startx1-10,endy1-50+10,p);
        canvasTemp.drawLine(startx1,endy1-50, startx1+10,endy1-50+10,p);
        //繪制x軸間隔線
        for(int i=1;i<=allX;i++){
            canvasTemp.drawLine(startx1+xinterval*i,starty1, startx1+xinterval*i,starty1-10,p);
            if(allX>30){
                p2.setTextSize(20);
            }
            canvasTemp.drawText(String.valueOf(i), startx1+xinterval*i, starty1+35, p2);
        }
        //繪制y軸間隔線
        for(int i=1;i<=allY;i++){
            canvasTemp.drawLine(startx1,starty1-yinterval*i, startx1+10,starty1-yinterval*i,p);
            if(allX>25){
                p2.setTextSize(20);
            }else{
                p2.setTextSize(35);
                canvasTemp.drawText(String.valueOf( (i*fully/allY)), startx1-55, starty1-yinterval*i+10, p2);
            }
        }
        imageView.setImageBitmap(newb);
    }

2.自定義坐標系參數獲取並繪制：

 public void comfir(View view) {
        EditText numberx=(EditText)findViewById(R.id.numberx);
        EditText numbery=(EditText)findViewById(R.id.numbery);
        EditText maxy=(EditText)findViewById(R.id.maxy);
        if(!numberx.getText().toString().trim().equals("")&&!numbery.getText().toString().trim().equals("")&&!maxy.getText().toString().trim().equals("")){
            /*//判斷輸入框中內容是否為空的錯誤方法：
            numberx.getText()!=null;
            numberx.getText().toString()!=null;
            numberx.getText().toString().equals("");*/
            allX= Integer.valueOf(String.valueOf(numberx.getText()));
            allY= Integer.valueOf(String.valueOf(numbery.getText()));
            fully= Integer.valueOf(String.valueOf(maxy.getText()));
            xinterval=(endx1-startx1)/allX;
            yinterval=(starty1-endy1)/allY;
            //rule1=(starty1-endy1)/allY;
            //rule2=(starty1-endy1)/fully;
            mypoint=new float[allX];
            all=0;
            chart();
        }
    }

3.將輸入的點繪制在坐標系中：

 public void paint(View view) {
        EditText point=(EditText)findViewById(R.id.point);
        if(all==fully){
            Toast.makeText(this,"已達最大x值",Toast.LENGTH_SHORT).show();
            point.setText("");
        }else{
            if(!point.getText().toString().trim().equals("")){
                thispoint=Float.valueOf(String.valueOf(point.getText()));
                if(thispoint>fully){
                    Toast.makeText(this,"大於最大y值,請重新輸入！",Toast.LENGTH_SHORT).show();
                    point.setText("");
                }else{
                    mypoint[all]=thispoint;
                    x2=startx1+xinterval*(all+1);
                    y2=starty1-thispoint/fully*rule1;
                    p.setStrokeWidth(10);
                    canvasTemp.drawPoint(x2,y2,p);
                    if(all>0){
                        p.setStrokeWidth(5);
                        canvasTemp.drawLine(x1,y1,x2,y2,p);
                    }
                    all++;
                }
                x1=x2;
                y1=y2;
            }
        }
        point.setText("");
    }

三.效果展示

 ”確認”鍵上面三個參數可實現對坐標系的自定義。“清除所有”按鈕會將折線圖清除，不會將坐標系也清除。

四.功能展望

1.多個折現圖同時展示。

2.加入顏色元素增加美觀性。

3.更改或優化折線圖數據輸入方式。

總結

到此這篇關於Android實現繪制折線圖APP代碼的文章就介紹到這瞭,更多相關Android繪制折線圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：