Android詳細介紹MPAndroidChart-LineChart

在開發當中曲線圖用的時候太多了，之前都是自己手寫，之后發現太累還丑不符合需求

MPAndroidChart

先介紹LineChart

0.效果圖

首先依賴  1. implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

2.xml布局

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/multi_line_Gl_chart"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginStart="17.5dp" />

3.邏輯代碼

我這里的需求是獲取24小時電量，不允許滑動縮放，X 24小時軸是只顯示偶數

Y軸數據精確到小數點兩位，Y軸最大值為獲取數據集合最大值，最大值小於1的時候最大值進1加0.1。大於1的時候最大值增加20%。。。。大概就是這樣        //左圖具有描述設置，默認有描述，我這里是之前有這個需求現在沒啦

最后的最后我這個是雙曲線，至於單曲線或者多個曲線，增加刪除就可以

Description description = new Description();
        description.setText("");
        description.setTextAlign(Paint.Align.CENTER);
        description.setTextSize(16);
        description.setPosition(200, 150);
        description.setTextColor(ContextCompat.getColor(this, android.R.color.holo_blue_bright));
        multiLineGlChart.setDescription(description);


        multiLineGlChart.setHighlightPerTapEnabled(false);//隱藏圖表內的點擊十字線
        multiLineGlChart.setHighlightPerDragEnabled(false);


        //設置是否后台繪制
        multiLineGlChart.setDrawGridBackground(false);
        //設置支持觸控手勢
        multiLineGlChart.setTouchEnabled(false);
        //設置縮放
        multiLineGlChart.setDragEnabled(true);
        //設置推動
        multiLineGlChart.setScaleEnabled(false);
        //如果禁用,擴展可以在x軸和y軸分別完成
        multiLineGlChart.setPinchZoom(false);
        Matrix m = new Matrix();
        m.postScale(1, 1f);//兩個參數分別是x,y軸的縮放比例。例如：將x軸的數據放大為之前的1.5倍，《這個地方是在設置能滑動的時候編輯的，假如X軸最多展示5條但是呢有10條數據，那么這里就是2,1》
        multiLineGlChart.getViewPortHandler().refresh(m, multiLineGlChart, true);//將圖表動畫顯示之前進行縮放
        multiLineGlChart.animateX(1000); // 動畫,x軸

        //設置圖例
        Legend legend = multiLineGlChart.getLegend();
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);//設置顯示在頂部
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);//設置圖例的顯示位置為居中
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//設置圖例顯示的布局為橫線排列
        legend.setTextSize(10f);//設置圖例文本的字體大小，根據界面顯示自行調配
        //配置X軸
        XAxis xAxis = multiLineGlChart.getXAxis();
        xAxis.setAxisMinimum(0);//X軸最大值最小值，
        xAxis.setGranularity(1);//設置X軸每個點之間數據的間隔
        xAxis.setLabelCount(5, false);//設置標簽個數
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //設置x標簽顯示的在底部
        xAxis.setDrawGridLines(false);//不畫X軸網格線
        xAxis.setDrawAxisLine(false);
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {//switch是當知道X軸有多少個的時候，下一個是不知道X軸數據數量的情況
 switch (index) {
                    case 1:
                        label = "00";
                        break;
                    case 2:
                        label = "";
                        break;
                    case 3:
                        label = "02";
                        break;
                    case 4:
                        label = "";
                        break;
                    case 5:
                        label = "04";
                        break;
                    case 6:
                        label = "";
                        break;
                    case 7:
                        label = "06";
                        break;
                    case 8:
                        label = "";
                        break;
                    case 9:
                        label = "08";
                        break;
                    case 10:
                        label = "";
                        break;
                    case 11:
                        label = "10";
                        break;
                    case 12:
                        label = "";
                        break;
                    case 13:
                        label = "12";
                        break;
                    case 14:
                        label = "";
                        break;
                    case 15:
                        label = "14";
                        break;
                    case 16:
                        label = "";
                        break;
                    case 17:
                        label = "16";
                        break;
                    case 18:
                        label = "";
                        break;
                    case 19:
                        label = "18";
                        break;
                    case 20:
                        label = "";
                        break;
                    case 21:
                        label = "20";
                        break;
                    case 22:
                        label = "";
                        break;
                    case 23:
                        label = "22";
                        break;
                    case 24:
                        label = "";
                        break;
                    case 25:
                        label = "24";
                        break;
                    default:
                        label = "";
                        break;
                }
                int index = (int) value;
                if (value==time.size()&&(int) value % time.size()==0){//假如沒有這個if會造成的后果是，當數據為40條的時候會出現最后一條數據取得值是第一條數據，so
                    String tradeDate = time.get(time.size()-1).substring(11,16);
                    return tradeDate;
                }else{
                    String tradeDate = time.get((int) value % time.size()).substring(11,16);
                    return tradeDate;
                }

            }
        });
        xAxis.setTextColor(ContextCompat.getColor(this, R.color.text_color));//設置標簽的文本顏色
        YAxis axisRight = multiLineGlChart.getAxisRight();
        axisRight.removeAllLimitLines();
        axisRight.setDrawAxisLine(false);//設置不畫左邊線的第一條線
        axisRight.setDrawGridLines(true);
        YAxis leftAxis = multiLineGlChart.getAxisLeft();
        leftAxis.removeAllLimitLines();
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        List<Double> list=new ArrayList<>();//以下的代碼是最大值的設置，個人最大值設置方法，也是需求，so，可以自己更改
        for (int i = 0; i < last.size(); i++) {
            try {
                list.add(Double.valueOf(last.get(i)));
            } catch (NumberFormatException e) {
                e.printStackTrace();
            }
        }

        double max = Collections.max(list)/1000;
        double min = Collections.min(list);

        List<Double> listNow=new ArrayList<>();
        for (int i = 0; i < now.size(); i++) {
            try {
                listNow.add(Double.valueOf(now.get(i).replaceAll("\\-","0")));
            } catch (NumberFormatException e) {
                e.printStackTrace();
            }
        }
        double minNow = Collections.min(listNow);
        double maxNow = Collections.max(listNow)/1000;

        if (max>maxNow){
//            leftAxis.setAxisMaximum((float)Math.ceil(max*1.2));//設置最大值
            if (max>1){
                leftAxis.setAxisMaximum((float) Math.ceil(max*1.2));//設置最大值
            }else{
                leftAxis.setAxisMaximum((float) (max+0.1));//設置最大值
            }
        }else{
//            leftAxis.setAxisMaximum((float) Math.ceil(maxNow*1.2));//設置最大值
            if (maxNow>1){
                leftAxis.setAxisMaximum((float) Math.ceil(maxNow*1.2));//設置最大值
            }else{
                leftAxis.setAxisMaximum((float) (maxNow+0.1));//設置最大值
            }
        }
        leftAxis.setAxisMinimum(0f);//設置最小值
        leftAxis.setLabelCount(4,true);//設置標簽的個數
        leftAxis.setDrawAxisLine(false);//設置不畫左邊線的第一條線


        //設置坐標軸標簽文字樣式
        leftAxis.setTypeface(Typeface.DEFAULT_BOLD);
        //設置此軸網格線顏色
        leftAxis.setGridColor(Color.parseColor("#1A00CAE3"));
        //設置此軸網格線寬度
        leftAxis.setGridLineWidth(0.5f);
        //設置坐標軸的顏色
        leftAxis.setAxisLineColor(Color.parseColor("#1A00CAE3"));
        //設置坐標軸的寬度
        leftAxis.setAxisLineWidth(1f);
        //使用虛線組成的網格線
        //參數：linelength：虛線長度
        // spacelength:虛線間隔長度
        // phase：虛線出發點（從第一根虛線的哪里出發）
        leftAxis.enableGridDashedLine(5f, 10f, 20f);

        leftAxis.setDrawGridLines(true);


        //自定義標簽顯示
        leftAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
//                int val = (int) value;//這里是設置是否是顯示成小數或者整數
                String val;
                DecimalFormat df = new DecimalFormat("#0.00");
                val = df.format(value);
                return val + "";

            }
        });
        //設置標簽文本顏色
        leftAxis.setTextColor(ContextCompat.getColor(this, R.color.text_color));

        multiLineGlChart.getAxisRight().setEnabled(false);//設置右側Y軸不顯示


        //第二條線
        List<Entry> values2 = new ArrayList<>();

//
        for (int i = 0; i < now.size(); i++) {
//            values2.add(new Entry((i+1), 120));
//            values2.add(new Entry((i+1), (Float.valueOf(String.valueOf(now.get(i))))/1000));
            values2.add(new BarEntry((i + 1),(Float.valueOf(String.valueOf(now.get(i))))/1000));
        }


        LineDataSet lineDataSet2 = new LineDataSet(values2, "");
        /*
            LINEAR,直線
            STEPPED,
            CUBIC_BEZIER,
            HORIZONTAL_BEZIER
         */
        lineDataSet2.setMode(LineDataSet.Mode.CUBIC_BEZIER);//設置折線圖的顯示模式，可以自行設置上面的值進行查看不同之處
        lineDataSet2.setColor(ContextCompat.getColor(this, R.color.color29ca5a));//設置線的顏色
        lineDataSet2.setLineWidth(1.5f);//設置線的寬度
        lineDataSet2.setDrawCircles(false);
        lineDataSet2.setDrawCircleHole(false);
        lineDataSet2.setAxisDependency(YAxis.AxisDependency.LEFT);//設置線數據依賴於左側y軸
        lineDataSet2.setDrawFilled(false);//設置不畫數據覆蓋的陰影層
        lineDataSet2.setDrawValues(false);//不繪制線的數據
        lineDataSet2.setValueTextColor(ContextCompat.getColor(this, R.color.text_color));//設置數據的文本顏色，如果不繪制線的數據 這句代碼也不用設置了
        lineDataSet2.setValueTextSize(15f);//如果不繪制線的數據 這句代碼也不用設置了
        lineDataSet2.setCircleRadius(4f);//設置每個折線點的大小
        lineDataSet2.setFormSize(0f);//設置當前這條線的圖例的大小
        lineDataSet2.setForm(Legend.LegendForm.CIRCLE);//設置圖例顯示為線
        lineDataSet2.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
//                int val = (int) value;
                String val;
                DecimalFormat df = new DecimalFormat("#0.00");
                val = df.format(value);
                return val + "";
            }
        });


        //第三條線
        List<Entry> values3 = new ArrayList<>();
        for (int i = 0; i < last.size(); i++) {
//            values3.add(new Entry((i+1), 110));
            values3.add(new BarEntry((i + 1), (Float.valueOf(String.valueOf(last.get(i))))/1000));
        }


        LineDataSet lineDataSet3 = new LineDataSet(values3, "");
        /*
            LINEAR,直線
            STEPPED,
            CUBIC_BEZIER,
            HORIZONTAL_BEZIER
         */
        lineDataSet3.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);//設置折線圖的顯示模式，可以自行設置上面的值進行查看不同之處
        lineDataSet3.setColor(ContextCompat.getColor(this, R.color.colorFFC738));//設置線的顏色
        lineDataSet3.setLineWidth(1.5f);//設置線的寬度
        lineDataSet3.setDrawCircles(false);

        lineDataSet3.setDrawCircleHole(false);
        lineDataSet3.setAxisDependency(YAxis.AxisDependency.LEFT);//設置線數據依賴於左側y軸
        lineDataSet3.setDrawFilled(false);//設置不畫數據覆蓋的陰影層
        lineDataSet3.setDrawValues(false);//不繪制線的數據
        lineDataSet3.setValueTextColor(ContextCompat.getColor(this, R.color.text_color));//設置數據的文本顏色，如果不繪制線的數據 這句代碼也不用設置了
        lineDataSet3.setValueTextSize(15f);//如果不繪制線的數據 這句代碼也不用設置了
        lineDataSet3.setCircleRadius(4f);//設置每個折線點的大小
        lineDataSet3.setFormSize(0f);//設置當前這條線的圖例的大小
        lineDataSet3.setForm(Legend.LegendForm.CIRCLE);//設置圖例顯示為線
        lineDataSet3.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                String val;
                DecimalFormat df = new DecimalFormat("#0.00");
                val = df.format(value);
                return val + "";
            }
        });


        //初始化一個LineDataSet集合來裝每個線的數據
        List<ILineDataSet> lineDataSetList = new ArrayList<>();


        if (chbGlJr.isChecked() && chbGlZr.isChecked()) {
            lineDataSetList.add(lineDataSet3);
            lineDataSetList.add(lineDataSet2);

        } else if (chbGlJr.isChecked() && !chbGlZr.isChecked()) {
            lineDataSetList.add(lineDataSet2);
        } else if (!chbGlJr.isChecked() && chbGlZr.isChecked()) {
            lineDataSetList.add(lineDataSet3);
        }


        //將多條線的數據全部給LineData
        LineData lineData = new LineData(lineDataSetList);
        multiLineGlChart.setData(lineData);

        //默認動畫
        multiLineGlChart.animateXY(1000, 1000);

　　

　　

   日常許願五星曹大爺劉大爺，祭品全服