1. 程式人生 > >MPAndroidChart折線圖詳細使用(三)

MPAndroidChart折線圖詳細使用(三)

這裡寫圖片描述

1.佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height
="match_parent" android:orientation="vertical">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#ffffff" android:orientation="horizontal" android:paddingLeft="10dp">
<TextView android:layout_width="2dp" android:layout_height
="13dp" android:background="#4a6def" android:paddingLeft="10dp" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="11dp" android:paddingBottom="10dp" android:paddingTop="10dp" android:text="一條折線圖" android:textColor="#222222" android:textSize="14sp" /> </LinearLayout> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lineChart" android:layout_width="match_parent" android:layout_height="200dp"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffff" android:orientation="horizontal" android:paddingLeft="10dp"> <TextView android:layout_width="2dp" android:layout_height="13dp" android:background="#4a6def" android:paddingLeft="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="11dp" android:paddingBottom="10dp" android:paddingTop="10dp" android:text="多條折線圖" android:textColor="#222222" android:textSize="14sp" /> </LinearLayout> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lineChart2" android:layout_width="match_parent" android:layout_height="250dp" ></com.github.mikephil.charting.charts.LineChart> </LinearLayout> </LinearLayout> </ScrollView>

二 顯示折線圖的acticity

package com.phone.mpandroid;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.github.mikephil.charting.charts.LineChart;

import java.util.ArrayList;
import java.util.List;


public class LinCharts extends AppCompatActivity {

    private LineChart lineChart,lineChart2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lin_charts);

        initView();
    }

    private void initView() {
        lineChart= (LineChart) findViewById(R.id.lineChart);
        lineChart2= (LineChart) findViewById(R.id.lineChart2);
//        顯 示一條折線
        showAlone();
        LineChartManager lineChartManager=new LineChartManager(lineChart2);
        //設定x軸的資料
        ArrayList<Float> xValues = new ArrayList<>();
        for (int i = 0; i <= 4; i++) {
            xValues.add((float) i);
        }

        //設定y軸的資料()
        List<List<Float>> yValues = new ArrayList<>();

        List<Float> y1Value = new ArrayList<>();
        List<Float> y2Value = new ArrayList<>();

        List<String> lableNameList = new ArrayList<>();
        lableNameList.add("交通執行");
        lableNameList.add("擁擠指數");

        for (int j = 0; j <= 4; j++) {
            float value = (float) (Math.random() * 80);
            y1Value.add(value);
            y2Value.add(value-5);
        }
        yValues.add(y1Value);
        yValues.add(y2Value);

        List<Integer> colorList = new ArrayList<>();
        colorList.add(Color.parseColor("#6785f2"));
        colorList.add(Color.parseColor("#eecc44"));
        lineChartManager.showLineChart(xValues, yValues, lableNameList, colorList);
        lineChartManager.setDescription("");

    }

    private void showAlone() {
        LineChartManager lineChartManager=new LineChartManager(lineChart);

        List<Float> xAxisValues=new ArrayList<>();
        List<Float> yAxisValues=new ArrayList<>();
        xAxisValues.add(0.0f);
        xAxisValues.add(1.0f);
        xAxisValues.add(2.0f);
        xAxisValues.add(3.0f);
        xAxisValues.add(4.0f);
        xAxisValues.add(5.0f);
        yAxisValues.add(50f);
        yAxisValues.add(60f);
        yAxisValues.add(70f);
        yAxisValues.add(40f);
        yAxisValues.add(80f);
        yAxisValues.add(60f);
        lineChartManager.showLineChart(xAxisValues,yAxisValues,"", Color.parseColor("#da6268"));
    }
}

三 顯示折線圖的管理類

package com.phone.mpandroid;

import android.graphics.Color;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by zhang on 2018/7/9.
 */

public class LineChartManager {

    private LineChart lineChart;
    private YAxis leftAxis;   //左邊Y軸
    private YAxis rightAxis;  //右邊Y軸
    private XAxis xAxis;      //X軸

    public LineChartManager(LineChart mLineChart) {
        this.lineChart = mLineChart;
        leftAxis = lineChart.getAxisLeft();
        rightAxis = lineChart.getAxisRight();
        xAxis = lineChart.getXAxis();
    }

    /**
     * 初始化LineChart
     */
    private void initLineChart(boolean legendShow) {
        lineChart.setDrawGridBackground(false);
        //顯示邊界
        lineChart.setDrawBorders(false);

        //設定動畫效果
        lineChart.animateX(1000);

        lineChart.setTouchEnabled(true); // 所有觸控事件,預設true
        lineChart.setDragEnabled(false);    // 可拖動,預設true
        lineChart.setScaleEnabled(false);   // 兩個軸上的縮放,X,Y分別預設為true
        lineChart.setScaleXEnabled(false);  // X軸上的縮放,預設true
        lineChart.setScaleYEnabled(false);  // Y軸上的縮放,預設true
        lineChart.setPinchZoom(false);  // X,Y軸同時縮放,false則X,Y軸單獨縮放,預設false
        lineChart.setDoubleTapToZoomEnabled(false); // 雙擊縮放,預設true
        lineChart.setDragDecelerationEnabled(true);    // 擡起手指,繼續滑動,預設true

        //折線圖例 標籤 設定
        Legend legend = lineChart.getLegend();
        if (legendShow) {
            legend.setDrawInside(false);
            legend.setFormSize(8);
            legend.setXEntrySpace(7f);
            legend.setYEntrySpace(0f);
            legend.setYOffset(0f);
            // legend.setForm(Legend.LegendForm.SQUARE);
            // 文字的大小
            legend.setTextSize(12);
            //顯示位置
            legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
            legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
            legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);

        } else {
            legend.setForm(Legend.LegendForm.NONE);
        }


        //XY軸的設定
        //X軸設定顯示位置在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setAxisMinimum(0f);
        xAxis.setGranularity(1f);
        // 不繪製網格線

        xAxis.setDrawGridLines(true);
        xAxis.setGridColor(Color.parseColor("#d8d8d8"));
        //設定最後和第一個標籤不超出x軸
        xAxis.setAvoidFirstLastClipping(true);
//        設定線的寬度
        xAxis.setAxisLineWidth(1.0f);
        xAxis.setAxisLineColor(Color.parseColor("#d5d5d5"));

        //保證Y軸從0開始,不然會上移一點
        leftAxis.setAxisMinimum(0f);
        // 顯示數字但不顯示線
        leftAxis.setDrawAxisLine(true);
        leftAxis.setTextColor(Color.parseColor("#d5d5d5"));

        leftAxis.setDrawGridLines(true);
//        設定網格為虛線
        leftAxis.enableGridDashedLine(10f, 10f, 0f);
        leftAxis.setGridColor(Color.parseColor("#d8d8d8"));
        leftAxis.setAxisLineColor(Color.parseColor("#d5d5d5"));
        rightAxis.setAxisMinimum(0f);
        // 線跟資料都不顯示
        rightAxis.setEnabled(false); //右側Y軸不顯示


    }

    /**
     * 初始化曲線 每一個LineDataSet代表一條線
     *
     * @param lineDataSet
     * @param color
     * @param mode        折線圖是否填充
     */
    private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) {
        lineDataSet.setColor(color);
        lineDataSet.setCircleColor(color);
        lineDataSet.setLineWidth(2f);
        lineDataSet.setCircleRadius(3f);
        //設定曲線值的圓點是實心還是空心
        lineDataSet.setDrawCircleHole(true);
        lineDataSet.setValueTextSize(9f);

        // 不顯示具體值
        lineDataSet.setDrawValues(false);

//        lineDataSet.setHighlightEnabled(false);
        //設定折線圖填充
        lineDataSet.setDrawFilled(mode);
        //設定填充顏色
        lineDataSet.setFillColor(color);
//        lineDataSet.setFormLineWidth(2f);
//        lineDataSet.setFormSize(15.f);
        //線模式為圓滑曲線(預設折線)
        lineDataSet.setMode(LineDataSet.Mode.LINEAR);
    }

    /**
     * 跟showLineCharDouble配對
     *
     * @param lineDataSet
     * @param color
     * @param mode
     */
    private void initLineCusDataSet(LineDataSet lineDataSet, int color, boolean mode) {
        initLineDataSet(lineDataSet, color, mode);
        lineDataSet.setDrawValues(false);
        lineDataSet.setDrawCircles(false);
    }

    /**
     * 展示折線圖(一條)
     *
     * @param xAxisValues
     * @param yAxisValues
     * @param label
     * @param color
     */
    public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {
        initLineChart(false);
        ArrayList<Entry> entries = new ArrayList<>();
        for (int i = 0; i < xAxisValues.size(); i++) {
            entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));
        }
        // 每一個LineDataSet代表一條線
        LineDataSet lineDataSet = new LineDataSet(entries, label);
        initLineDataSet(lineDataSet, color, true);

        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(lineDataSet);
        LineData data = new LineData(dataSets);
        //設定X軸的刻度數
//        xAxis.setLabelCount(xAxisValues.size(), false);
        xAxis.setTextColor(Color.parseColor("#a1a1a1"));
        //文字傾斜度
//        xAxis.setLabelRotationAngle(-45);
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                if (value == 0) {
                    return "阜成門";
                }
                if (value == 2) {
                    return "國貿";
                }
                if (value == 3) {
                    return "積水潭";
                }
                if (value == 4) {
                    return "三元橋";
                }
                if (value == 5) {
                    return "西直門";
                }
                return "西直門";
            }
        });

        lineChart.setData(data);

    }


    /**
     * 展示折線圖(一條)
     *
     * @param xAxisValues
     * @param yAxisValues
     * @param label
     * @param color
     */
    public void showAirLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {
        initLineChart(false);
        ArrayList<Entry> entries = new ArrayList<>();
        for (int i = 0; i < xAxisValues.size(); i++) {
            entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));
        }
        // 每一個LineDataSet代表一條線
        LineDataSet lineDataSet = new LineDataSet(entries, label);
        initLineDataSet(lineDataSet, color, true);

        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(lineDataSet);
        LineData data = new LineData(dataSets);
        //設定X軸的刻度數
//        xAxis.setLabelCount(xAxisValues.size(), false);
        xAxis.setTextColor(Color.parseColor("#a1a1a1"));
        //文字傾斜度
//        xAxis.setLabelRotationAngle(-45);
        lineChart.setData(data);

    }


    /**
     * 展示線性圖(多條)
     *
     * @param xAxisValues
     * @param yAxisValues 多條曲線Y軸資料集合的集合
     * @param labels
     * @param colours
     */
    public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {
        initLineChart(true);
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        for (int i = 0; i < yAxisValues.size(); i++) {
            ArrayList<Entry> entries = new ArrayList<>();
            for (int j = 0; j < yAxisValues.get(i).size(); j++) {
                if (j >= xAxisValues.size()) {
                    j = xAxisValues.size() - 1;
                }
                entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
            }
            LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));

            initLineDataSet(lineDataSet, colours.get(i), true);
            lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
            dataSets.add(lineDataSet);
        }
        LineData data = new LineData(dataSets);
        xAxis.setLabelCount(xAxisValues.size(), true);
        String[] xValues = {"6:00", "9:00", "12:00", "15:00", "18:00"};
        xAxis.setValueFormatter(new XAxisValueFormatter(xValues));

        lineChart.setData(data);
    }

    public class XAxisValueFormatter implements IAxisValueFormatter {

        private String[] xValues;

        public XAxisValueFormatter(String[] xValues) {
            this.xValues = xValues;
        }

        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return xValues[(int) value];
        }

    }

    /**
     * 只顯示兩條 其中一條是影 定製化
     *
     * @param xAxisValues
     * @param yAxisValues 只有兩條資料
     * @param labels
     * @param colours
     */
    public void showLineCharDouble(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {
        initLineChart(true);
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        //
        for (int i = 0; i < 2; i++) {
            ArrayList<Entry> entries = new ArrayList<>();
            for (int j = 0; j < yAxisValues.get(i).size(); j++) {
                if (j >= xAxisValues.size()) {
                    j = xAxisValues.size() - 1;
                }
                entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
            }
            LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));

            initLineCusDataSet(lineDataSet, colours.get(i), false);
//            if (i == 1) {
//                initLineCusDataSet(lineDataSet, colours.get(i), false);
//            } else {
//                initLineDataSet(lineDataSet, colours.get(i), false);
//            }

            dataSets.add(lineDataSet);
        }
        LineData data = new LineData(dataSets);
        xAxis.setLabelCount(xAxisValues.size(), true);
        lineChart.setData(data);
    }

    /**
     * 設定Y軸值
     *
     * @param max
     * @param min
     * @param labelCount
     */
    public void setYAxis(float max, float min, int labelCount) {
        if (max < min) {
            return;
        }
        leftAxis.setAxisMaximum(max);
        leftAxis.setAxisMinimum(min);
        leftAxis.setLabelCount(labelCount, false);

        rightAxis.setAxisMaximum(max);
        rightAxis.setAxisMinimum(min);
        rightAxis.setLabelCount(labelCount, false);
        lineChart.invalidate();
    }

    /**
     * 設定X軸的值
     *
     * @param max
     * @param min
     * @param labelCount
     */
    public void setXAxis(float max, float min, int labelCount) {
        xAxis.setAxisMaximum(max);
        xAxis.setAxisMinimum(min);
        xAxis.setLabelCount(labelCount, true);

        lineChart.invalidate();
    }

    /**
     * 設定高限制線
     *
     * @param high
     * @param name
     */
    public void setHightLimitLine(float high, String name, int color) {
        if (name == null) {
            name = "高限制線";
        }
        LimitLine hightLimit = new LimitLine(high, name);
        hightLimit.setLineWidth(2f);
        hightLimit.setTextSize(10f);
        hightLimit.setLineColor(color);
        hightLimit.setTextColor(color);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 設定低限制線
     *
     * @param low
     * @param name
     */
    public void setLowLimitLine(int low, String name) {
        if (name == null) {
            name = "低限制線";
        }
        LimitLine hightLimit = new LimitLine(low, name);
        hightLimit.setLineWidth(4f);
        hightLimit.setTextSize(10f);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 設定描述資訊
     *
     * @param str
     */
    public void setDescription(String str) {
        Description description = new Description();
        description.setText(str);
        lineChart.setDescription(description);
        lineChart.invalidate();
    }
}