Android MPAndroidChart LineChart

Android MPAndroidChart LineChart

  1. 首先添加依賴

    在project下打開build.gradle,在allprojects寫入
    maven{ url ‘https://jitpack.io’}

在這裏插入圖片描述

  1. 在app下打開build.gradle,添加依賴

    implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’

在這裏插入圖片描述
接下來就可以使用

在需要的xml中使用對應控件

控件 作用
com.github.mikephil.charting.charts.BarChart 柱狀圖
com.github.mikephil.charting.charts.HorizontalBarChart 水平柱狀圖
com.github.mikephil.charting.charts.LineChart 折線圖
com.github.mikephil.charting.charts.PieChart 餅圖
com.github.mikephil.charting.charts.CombinedChart 組合圖
com.github.mikephil.charting.charts.RadarChart 雷達圖
com.github.mikephil.charting.charts.BubbleChart 泡泡圖
com.github.mikephil.charting.charts.ScatterChart 散點圖
com.github.mikephil.charting.charts.CandleStickChart 蠟燭圖

一些通用的方法

常用方法 解釋
setExtraOffsets() 設置左,上,右,下的偏移量
invalidate() 加載
getXAxis() 獲得x軸
getAxisRight() 獲取右軸
getAxisLeft() 獲取左軸
getDescription() 獲得圖表的描述
getLegend() 獲得圖例的描述

下面已圖爲例

折線圖

  1. 設置各點的數據(Entry)
    注意Entry爲這個jar包提供的
List<Entry> yVals1 = new ArrayList<>();
float[] ys1 = new float[] {
        19f, 19f, 18f, 18f, 18f, 18f, 17f, 16f, 17f, 19f,
        21f, 21f};
for (int i = 0; i < ys1.length; i++) {
    yVals1.add(new Entry((i + 1) * 3,ys1[i]));
}

  1. 用LineDataSet連接各個點的數據
LineDataSet set1=new LineDataSet(yVals1,"圖例名");

爲該圖例裝飾的一些常用方法

常用方法 解釋
setDrawFilled() 設置允許填充
setFillColor() 設置填充顏色
setColor() 設置線條顏色
setMode() 設置風格
setLineWidth() 設置線寬
setHighlightEnabled() 是否禁用點擊高亮線
setForm() /設置圖例的形式
setValueTextSize() 設置顯示值文字大小
  1. 用LineData完成設置
LineData lineData=new LineData(set1);

多條線可添加在該構造方法後

LineData lineData=new LineData(set1,set2);

也可以

ArrayList<ILineDataSet> dataSets=new ArrayList<>();
dataSets.add(set1);dataSets.add(set2);
LineData data=new LineData(dataSets);
  1. 添加加載
lineChart.setData(lineData);
lineChart.invalidate();
  1. 設置x軸
XAxis xAxis = lineChart.getXAxis();
常用方法 解釋
setDrawGridLines() 是否畫網格線
setAxisMinimum() 設置最小值
setAxisMaximum() 最大值
setLabelCount() 顯示的個數
setPosition() 所在位置
setEnabled() 禁用顯示
  1. 設置左,右軸
    同理x軸
YAxis axisLeft = lineChart.getAxisLeft();

完整代碼

package com.example.mpandroidchart_all.FragmentChart;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.example.mpandroidchart_all.Market.TMarket;
import com.example.mpandroidchart_all.R;
import com.github.mikephil.charting.charts.LineChart;
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 java.util.ArrayList;
import java.util.List;


public class lineChartFragment extends Fragment {
    private LineChart lineChart;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_linechart,container,false);
        lineChart=view.findViewById(R.id.line_chart);

        setXAxis();
        setYAxis();
        initData();

        return view;
    }
    private void setXAxis(){
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setAxisMinimum(0f);
        xAxis.setAxisMaximum(42f);
        xAxis.setLabelCount(15);
        xAxis.setDrawGridLines(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

    }
    private void setYAxis(){
        YAxis axisLeft = lineChart.getAxisLeft();
        axisLeft.setAxisMaximum(26);
        axisLeft.setAxisMinimum(14);
        lineChart.getAxisRight().setEnabled(false);
    }

    private void initData() {
        lineChart.setExtraOffsets(24f,24f,24f,0f);
        setChartData();
    }
    private void setChartData(){
        List<Entry> yVals1 = new ArrayList<>();
        float[] ys1 = new float[] {
                19f, 19f, 18f, 18f, 18f, 18f, 17f, 16f, 17f, 19f,
                21f, 21f};
        for (int i = 0; i < ys1.length; i++) {
            yVals1.add(new Entry((i + 1) * 3,ys1[i]));
        }
        LineDataSet set1=new LineDataSet(yVals1,"");
        set1.setDrawFilled(true);
        set1.setFillColor(Color.WHITE);
        LineData lineData=new LineData(set1);
        TMarket tMarket=new TMarket();
        lineChart.setMarker(tMarket);
        lineChart.setData(lineData);
        lineChart.invalidate();
    }
}

注意我是用碎片做的,如果需要複製所需代碼即可

在這裏插入圖片描述

如果想把線改成貝塞斯曲線

set1.setMode(LineDataSet.Mode.CUBIC_BEZIER)

即可

發佈了20 篇原創文章 · 獲贊 6 · 訪問量 4912
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章