Android MPAndroidChart LineChart
-
首先添加依賴
在project下打開build.gradle,在allprojects寫入
maven{ url ‘https://jitpack.io’}
-
在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() | 獲得圖例的描述 |
下面已圖爲例
折線圖
- 設置各點的數據(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]));
}
- 用LineDataSet連接各個點的數據
LineDataSet set1=new LineDataSet(yVals1,"圖例名");
爲該圖例裝飾的一些常用方法
| 常用方法 | 解釋 |
|---|---|
| setDrawFilled() | 設置允許填充 |
| setFillColor() | 設置填充顏色 |
| setColor() | 設置線條顏色 |
| setMode() | 設置風格 |
| setLineWidth() | 設置線寬 |
| setHighlightEnabled() | 是否禁用點擊高亮線 |
| setForm() | /設置圖例的形式 |
| setValueTextSize() | 設置顯示值文字大小 |
- 用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);
- 添加加載
lineChart.setData(lineData);
lineChart.invalidate();
- 設置x軸
XAxis xAxis = lineChart.getXAxis();
| 常用方法 | 解釋 |
|---|---|
| setDrawGridLines() | 是否畫網格線 |
| setAxisMinimum() | 設置最小值 |
| setAxisMaximum() | 最大值 |
| setLabelCount() | 顯示的個數 |
| setPosition() | 所在位置 |
| setEnabled() | 禁用顯示 |
- 設置左，右軸
同理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)
即可
