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)
即可