Android使用LineChart實現貝塞爾曲線圖

老規矩，話不多說，先上圖。

比起樹狀圖和條形圖，現在的貝塞爾曲線圖更加的受歡迎。因爲之前項目中用到過這個，所以今天特意摘取出來，以供參考和後期使用。

請拿出你們的小手手，開始劃優點了。

• 支持手動刻畫X、Y軸大小及刻度
• 支持根據數值動態改變Y軸大小及刻度。
• 支持自定義界面。
• 支持選中變色。
• 支持設置漸變色。
• 支持的比較多，支持人工服務（不懂就問）。

好了，開始上代碼吧。效果已經看過了，下來就是代碼。

首先，在app的build.gradle裏面導入項目


implementation project(':MPChartLib')

Activity.class

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        chart = findViewById(R.id.chart);
        bt_change = findViewById(R.id.bt_change);
        bt_defult = findViewById(R.id.bt_defult);

        bt_change.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //默認爲0.0f
                List<Float> dataFloat = new ArrayList<>();
                for (int i = 0; i < 24; i++) {
                    if(i == 2){
                        dataFloat.add(24.0f);
                    }else if (i == 4){
                        dataFloat.add(36.0f);
                    }else if (i == 6){
                        dataFloat.add(17.0f);
                    }else if (i == 8){
                        dataFloat.add(50.0f);
                    }else if (i == 10){
                        dataFloat.add(82.0f);
                    }else if (i == 12){
                        dataFloat.add(12.0f);
                    }else if (i == 19){
                        dataFloat.add(23.0f);
                    }else if (i == 21){
                        dataFloat.add(20.0f);
                    }else if (i == 24){
                        dataFloat.add(40.0f);
                    }else{
                        dataFloat.add(0.0f);
                    }
//                    dataFloat.add(0.0f);
                }
                setData(24, dataFloat);
            }
        });


        bt_defult.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //默認爲0.0f
                List<Float> dataFloat = new ArrayList<>();
                for (int i = 0; i < 24; i++) {
                    dataFloat.add(0.0f);
                }
                setData(24, dataFloat);
            }
        });
        //默認爲0.0f
        List<Float> dataFloat = new ArrayList<>();
        for (int i = 0; i < 24; i++) {
            dataFloat.add(0.0f);
        }
        setData(24, dataFloat);

        initData();

    }

 注：設置默認數據

設置默認的x軸和y軸

//X軸
        XAxis xAxis;
        {
            xAxis = chart.getXAxis();  //獲取x軸
            chart.getAxisLeft().setEnabled(true); //是否顯示左邊Y軸網格背景線
            xAxis.setLabelCount(13, true); //x軸長度，並是否自適配
            xAxis.setDrawGridLines(true);//繪製格網線
            xAxis.setGranularity(1f);//設置最小間隔，防止當放大時，出現重複標籤。
            xAxis.setLabelCount(13);//設置x軸顯示的標籤個數
            xAxis.setAxisLineWidth(1f);//設置x軸寬度, ...其他樣式


            //設置X軸網格背景的顏色
            xAxis.setGridColor(Color.parseColor("#00000000"));
            //設置X軸字體的顏色
            xAxis.setTextColor(Color.parseColor("#798194"));

            //格式化顯示數據
            xAxis.setValueFormatter(new IAxisValueFormatter() {
                @Override
                public String getFormattedValue(float value, AxisBase axis) {

                    //這裏是我自己的邏輯
                    Log.d("TYY_CC", "=====" + value);
                    int time;
                    time = (int) value;
                    if(time/2  != 0){
                        time += 1;
                    }
                    if(time == 1) time = 2;
                    if(time == 23) time = 24;
                    return time+ "點";
                }
            });
        }



        //Y軸
        YAxis yAxis;
        {
            yAxis = chart.getAxisLeft();  //獲取Y軸

            chart.getAxisRight().setEnabled(false);  //是否顯示左邊Y軸網格背景線
            yAxis.setLabelCount(8, true);  //設置Y軸的個數和自適應
            yAxis.setDrawGridLines(true);  //繪製y軸格網線
            yAxis.setDrawZeroLine(true);   //繪製0線


            yAxis.setTextColor(Color.parseColor("#ffffff"));
            yAxis.setAxisMaximum(100f);
            yAxis.setAxisMinimum(0f);
            yAxis.setDrawLabels(false);//繪製標籤  指軸上的對應數值不顯示

        }


        chart.animateX(1500);//x軸方向動畫

注：默認設置

setData方法：

private void setData(int count, List<Float> range) {
        ArrayList<Entry> values = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            values.add(new Entry(i, range.get(i), null));
        }


        chart.setTouchEnabled(false);
        XAxis xAxis = chart.getXAxis();


        //設置X軸的位置（默認在上方）：
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//值：BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE
        xAxis.setLabelCount(13, true);
        //啓用X軸
        xAxis.setEnabled(true);
        xAxis.setAxisLineWidth(1f);
        xAxis.setAxisLineColor(Color.RED);
        xAxis.setDrawGridLines(false);
        //設置X軸避免圖表或屏幕的邊緣的第一個和最後一個軸中的標籤條目被裁剪
        xAxis.setAvoidFirstLastClipping(true);


        final YAxis yAxis = chart.getAxisLeft();

//        //是否啓用繪製零線:設置爲true後纔有後面的操作
//        yAxis.setDrawZeroLine(true);
//        //設置繪製零線寬度
//        yAxis.setZeroLineWidth(1f);
//        //繪製零線顏色
//        yAxis.setZeroLineColor(Color.parseColor("#4876FD"));

        if (Collections.max(range) == 0) {
            yAxis.setAxisMaximum(100f);
        } else {
            yAxis.setAxisMaximum(100f);
        }



        LineDataSet set1;
        if (chart.getData() != null &&
                chart.getData().getDataSetCount() > 0) {
//            chart.clearValues();

            chart.setScaleMinima(1.0f, 1.0f);

            chart.getViewPortHandler().refresh(new Matrix(), chart, true);


            set1 = (LineDataSet) chart.getData().getDataSetByIndex(0);


            set1.setValues(values);
            set1.notifyDataSetChanged();


            // redraw
            chart.invalidate();
        } else {
            // create a dataset and give it a type
            set1 = new LineDataSet(values, "02");

            set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);

            set1.setDrawIcons(false);

            // black lines and points
            set1.setLineWidth(2f);
            set1.setColor(Color.parseColor("#4876FD"));// 鏈接線顏色
            set1.setDrawFilled(true);
            set1.setDrawValues(true);
            set1.setCircleHoleRadius(0f);
            set1.setDrawCircleHole(false);//設置小圓點是否空心
            set1.setDrawCircles(false);//顯示小圓心
            set1.setHighLightColor(Color.parseColor("#00000000")); // 設置點擊某個點時，橫豎兩條線的顏色
            set1.setValueTextSize(9f);
            set1.setValueTextColor(Color.parseColor("#798194"));
//            set1.enableDashedHighlightLine(10f, 5f, 0f);
            set1.setDrawValues(false);//不顯示當前數值

            set1.setFillFormatter(new IFillFormatter() {
                @Override
                public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
                    return chart.getAxisLeft().getAxisMinimum();
                }
            });

            if (Utils.getSDKInt() >= 18) {
                // drawables only supported on api level 18 and above
                Drawable drawable = ContextCompat.getDrawable(MainActivity.this, R.drawable.bg);
                set1.setFillDrawable(drawable);
            } else {
                set1.setFillColor(Color.WHITE);
            }
            ArrayList<ILineDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1); // add the data sets
            // create a data object with the data sets
            LineData data = new LineData(dataSets);
            // set data
            chart.setData(data);//設置數據
        }
    }

注：根據數據動態賦值。並設置連接線。

以上就是所有的代碼

附上demo源碼。

CSDN：點這裏下載源碼，快，戳我戳我…

GitHub：點擊跳轉至GitHub

q：486789970
email：[email protected]

如果有什麼問題，歡迎大家指導。並相互聯繫，希望能夠通過文章互相學習。

												---財財親筆