Android：开源框架 MPAndroidChart 的简单使用——以折线图为例
2019年11月7日 星期四 下午7:31???? 1. 初步创建视图1.1 引入依赖在工程根目录下的 build.gradle 文件中添加：allprojects {repositories {jcenter()google()maven { url "https://jitpack.io" }}}继续在 app 目录下的 build.gradle 添加：implementation 'com.
·
2019年11月7日 星期四 下午7:31
📈 1. 初步创建视图
1.1 引入依赖
在工程根目录下的 build.gradle 文件中添加：
allprojects {
repositories {
jcenter()
google()
maven { url "https://jitpack.io" }
}
}
继续在 app 目录下的 build.gradle 添加：
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
然后重新将gradle同步一下即可。
1.2 初始化折线图组件
首先在布局文件中引入LineChart图表组件：
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/line_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
接着在Activity或者Fragment中初始化组件。创建initView()方法，在里面写：
private LineChart line_chart
private void initView() {
line_chart = findViewById(R.id.line_chart);
}
1.3 添加Entry数据
所谓Entry，可以理解为一个点，里面填写 x 值和 y 值。
新建一个initData()方法，在这里我们先创建一个List数组，泛型填Entry，表示这是一个Entry类型的数组。然后我们往里面逐个添加Entry类型的数据：
private void initData() {
List<Entry> entries = new ArrayList<>();
entries.add(new Entry(0,6));
entries.add(new Entry(1,12));
entries.add(new Entry(2,3));
entries.add(new Entry(3,4));
entries.add(new Entry(4,8));
entries.add(new Entry(5,20));
}
1.4 创建LineDataSet实例
所谓LineDataSet，可以理解为一条线，是某一Entry数组的集合。
LineDataSet dataSet = new LineDataSet(entries, "");
LineDataSet的实例里面接收两个参数：
- 第一个参数接收Entry数组，我们将刚刚创建好的Entry数组放入；
- 第二个参数接收一个标签，用于显示在图表上，不必要时可暂时填一个空字符串。
1.5 创建LineData实例 & 将数据放入图表控件中
所谓LineData,可以理解为多条线的集合，也就是多个LineDataSet的集合。
LineData lineData = new LineData(dataSet);
Last but not least,想要将数据放入图表控件中，还需要在末尾添加一句：
line_chart.setData(lineData);
不完成这一步的话是无法将所创建好的数据加载进控件中的，控件会显示"No chart data available"。
🌃 效果图：
📝 1.6 小结：
💡 1.6.1 实现步骤：
📃 1.6.2 所有代码：
private LineChart line_chart;
private void initView() {
lineChart = mView.findViewById(R.id.chart_line);
initData();
}
private void initData() {
List<Entry> entries = new ArrayList<>();
entries.add(new Entry(0,6));
entries.add(new Entry(1,12));
entries.add(new Entry(2,3));
entries.add(new Entry(3,4));
entries.add(new Entry(4,8));
entries.add(new Entry(5,20));
LineDataSet dataSet = new LineDataSet(entries, "");
LineData lineData = new LineData(dataSet);
line_chart.setData(lineData);
}
📈 2. 添加第二条线
前面我们已经知道，LineDataSet代表Entry的集合。那么对应的，一条线就是一个LineDataSet，两条线就是两个LineDataSet，我们创建第二条线只需要再添加一个LineDataSet即可。
创建第二个LineDataSet实例前，不要忘了先将Entry数据放进去：
List<Entry> entries2 = new ArrayList<>();
entries2.add(new Entry(0,12));
entries2.add(new Entry(1,7));
entries2.add(new Entry(2,8));
entries2.add(new Entry(3,11));
entries2.add(new Entry(4,8));
entries2.add(new Entry(5,16));
接着创建第二个LineDataSet实例：
// 注意放入的Entry数据不要弄错了
LineDataSet dataSet2 = new LineDataSet(entries2, "");
最后我们将这两个LineDataSet实例放入LineData中：
LineData lineData = new LineData(dataSet,dataSet2);
此外，LineData的构造函数内可以直接填入一个ILineDataSet类型的数组，而这个数组的作用就是将多个LineDataSet装入，这样就不用再LineData里填写多个LineDataSet了。
🌃 效果图：
📝 2.1 小结：
💡 2.1.1 实现步骤：
📜 2.1.2 所有代码：
private void initData() {
// List<ILineDataSet> dataSets = new ArrayList<>();
List<Entry> entries = new ArrayList<>();
entries.add(new Entry(0,6));
entries.add(new Entry(1,12));
entries.add(new Entry(2,3));
entries.add(new Entry(3,4));
entries.add(new Entry(4,8));
entries.add(new Entry(5,20));
List<Entry> entries2 = new ArrayList<>();
entries2.add(new Entry(0,12));
entries2.add(new Entry(1,7));
entries2.add(new Entry(2,8));
entries2.add(new Entry(3,11));
entries2.add(new Entry(4,8));
entries2.add(new Entry(5,16));
LineDataSet dataSet = new LineDataSet(entries, "");
LineDataSet dataSet2 = new LineDataSet(entries2, "");
// dataSets.add(dataSet);
// dataSets.add(dataSet2);
LineData lineData = new LineData(dataSet,dataSet2);
// LineData lineData = new LineData(dataSets);
lineChart.setData(lineData);
}
📈 3. 界面优化
3.1 设置X轴和Y轴的样式
新建一个setAxis()的方法并调用：
private void setAxis() {
// 获得X轴实例
XAxis xl = line_chart.getXAxis();
// 设置X轴显示位置
xl.setPosition(XAxis.XAxisPosition.BOTTOM);
// 设置X轴步长
xl.setGranularity(1);
// 设置是否显示X轴的延伸线
xl.setDrawGridLines(false);
// 获得左边Y轴实例
YAxis yl = line_chart.getAxisLeft();
// 设置左边Y轴最小单位为0
yl.setAxisMinimum(0);
// 获得右边Y轴的实例
YAxis yl_right = line_chart.getAxisRight();
// 设置右边Y轴是否可用
yl_right.setEnabled(false);
}
3.2 设置图例样式
新建一个setLegend()方法并调用：
private void setLegend() {
// 获得图例的实例
Legend legend = line_chart.getLegend();
// 设置图例是否在图表控件内部显示
legend.setDrawInside(true);
// 设置图例的排列方向
legend.setOrientation(Legend.LegendOrientation.VERTICAL);
// 设置图例在图表控件中的水平对齐方向
legend.setHorizontalAlignment
(Legend.LegendHorizontalAlignment.LEFT);
// 设置图例在图表控件中的垂直对齐方向
legend.setVerticalAlignment
(Legend.LegendVerticalAlignment.TOP);
// 设置图例的色块大小
legend.setFormSize(15);
// 设置图例的色块形状
legend.setForm(Legend.LegendForm.CIRCLE);
// 设置图例的文字大小
legend.setTextSize(15);
// 设置图例的文字颜色
legend.setTextColor(Color.BLACK);
}
然后补全LineDataSet方法里的标签参数，这样才能把图例的文字显示出来：
...
LineDataSet dataSet = new LineDataSet(entries, "长沙市温度");
LineDataSet dataSet2 = new LineDataSet(entries, "娄底市温度");
...
3.3 设置折线样式
为了代码的易读性更高，我们需要修改initData里的方法的代码。
新建一个setDataStyle()的方法，并将两个Entry类型的数组作为参数传过去：
private void initData() {
List<Entry> entries = new ArrayList<>();
entries.add(new Entry(0,6));
entries.add(new Entry(1,12));
entries.add(new Entry(2,3));
entries.add(new Entry(3,4));
entries.add(new Entry(4,8));
entries.add(new Entry(5,20));
List<Entry> entries2 = new ArrayList<>();
entries2.add(new Entry(0,12));
entries2.add(new Entry(1,7));
entries2.add(new Entry(2,8));
entries2.add(new Entry(3,11));
entries2.add(new Entry(4,8));
entries2.add(new Entry(5,16));
setDataStyle(entries,entries2);
}
然后在新建的方法里写：
/**
* 设置折线的样式
* @param entries
* @param entries2
*/
private void setDataStyle(List<Entry> entries, List<Entry> entries2) {
// List<ILineDataSet> dataSets = new ArrayList<>();
LineDataSet dataSet = new LineDataSet(entries, "长沙市温度");
// 是否设置线的填充色
dataSet.setDrawFilled(true);
// 折线的颜色
dataSet.setFillColor(Color.parseColor("#78C256"));
// 填充色的颜色
dataSet.setColor(Color.parseColor("#78C256"));
// 折线的宽度
dataSet.setLineWidth(2);
// 是否设置圆点空洞
dataSet.setDrawCircleHole(false);
// 设置圆点的半径
dataSet.setCircleRadius(3);
// 设置圆的背景颜色
dataSet.setCircleColor(Color.parseColor("#78C256"));
// 设置数值字体大小
dataSet.setValueTextSize(13);
// 设置数值字体颜色
dataSet.setValueTextColor(Color.parseColor("#78C256"));
// 设置折线的显示模式
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
LineDataSet dataSet2 = new LineDataSet(entries2, "娄底市温度");
dataSet2.setDrawFilled(true);
dataSet2.setFillColor(Color.parseColor("#009AD1"));
dataSet2.setColor(Color.parseColor("#009AD1"));
dataSet2.setLineWidth(2);
dataSet2.setDrawCircleHole(false);
dataSet2.setCircleRadius(3);
dataSet2.setCircleColor(Color.parseColor("#009AD1"));
dataSet2.setValueTextSize(13);
dataSet2.setValueTextColor(Color.parseColor("#009AD1"));
dataSet2.setMode(LineDataSet.Mode.CUBIC_BEZIER);
// dataSets.add(dataSet);
// dataSets.add(dataSet2);
LineData lineData = new LineData(dataSet,dataSet2);
// LineData lineData = new LineData(dataSets);
line_chart.setData(lineData);
}
3.4 LineChart控件的优化：
private void initView() {
line_chart = mView.findViewById(R.id.chart_line);
initData();
setAxis();
setLegend();
// 设置图表控件是否可以进行触控操作
line_chart.setEnabled(false);
// 调用图表控件「描述方法」并直接禁用
line_chart.getDescription().setEnabled(false);
}
🌃 效果图：
📃 4. 本节完整代码
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.ui102302.R;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
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.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
public class LineChartFragment extends Fragment {
private View mView;
private LineChart line_chart;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.chart_seventh, container, false);
initView();
return mView;
}
private void initView() {
line_chart = mView.findViewById(R.id.chart_line);
initData();
setAxis();
setLegend();
// 设置图表控件是否可以进行触控操作
line_chart.setEnabled(false);
// 调用图表控件「描述方法」并直接禁用
line_chart.getDescription().setEnabled(false);
}
private void setLegend() {
// 获得图例的实例
Legend legend = line_chart.getLegend();
// 设置图例是否在图表控件内部显示
legend.setDrawInside(true);
// 设置图例的排列方向
legend.setOrientation(Legend.LegendOrientation.VERTICAL);
// 设置图例在图表控件中的水平对齐方向
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
// 设置图例在图表控件中的垂直对齐方向
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
// 设置图例的色块大小
legend.setFormSize(15);
// 设置图例的色块形状
legend.setForm(Legend.LegendForm.CIRCLE);
// 设置图例的文字大小
legend.setTextSize(15);
// 设置图例的文字颜色
legend.setTextColor(Color.BLACK);
}
private void setAxis() {
// 获得X轴实例
XAxis xl = line_chart.getXAxis();
// 设置X轴显示位置
xl.setPosition(XAxis.XAxisPosition.BOTTOM);
// 设置X轴步长
xl.setGranularity(1);
// 设置是否显示X轴的延伸线
xl.setDrawGridLines(false);
// 获得左边Y轴实例
YAxis yl = line_chart.getAxisLeft();
// 设置左边Y轴最小单位为0
yl.setAxisMinimum(0);
// 获得右边Y轴的实例
YAxis yl_right = line_chart.getAxisRight();
// 设置右边Y轴是否可用
yl_right.setEnabled(false);
}
private void initData() {
List<Entry> entries = new ArrayList<>();
entries.add(new Entry(0,6));
entries.add(new Entry(1,12));
entries.add(new Entry(2,3));
entries.add(new Entry(3,4));
entries.add(new Entry(4,8));
entries.add(new Entry(5,20));
List<Entry> entries2 = new ArrayList<>();
entries2.add(new Entry(0,12));
entries2.add(new Entry(1,7));
entries2.add(new Entry(2,8));
entries2.add(new Entry(3,11));
entries2.add(new Entry(4,8));
entries2.add(new Entry(5,16));
setDataStyle(entries,entries2);
}
/**
* 设置折线的样式
* @param entries
* @param entries2
*/
private void setDataStyle(List<Entry> entries, List<Entry> entries2) {
// List<ILineDataSet> dataSets = new ArrayList<>();
LineDataSet dataSet = new LineDataSet(entries, "长沙市温度");
// 是否设置线的填充色
dataSet.setDrawFilled(true);
// 折线的颜色
dataSet.setFillColor(Color.parseColor("#78C256"));
// 填充色的颜色
dataSet.setColor(Color.parseColor("#78C256"));
// 折线的宽度
dataSet.setLineWidth(2);
// 是否设置圆点空洞
dataSet.setDrawCircleHole(false);
// 设置圆点的半径
dataSet.setCircleRadius(3);
// 设置圆的背景颜色
dataSet.setCircleColor(Color.parseColor("#78C256"));
// 设置数值字体大小
dataSet.setValueTextSize(13);
// 设置数值字体颜色
dataSet.setValueTextColor(Color.parseColor("#78C256"));
// 设置折线的显示模式
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
LineDataSet dataSet2 = new LineDataSet(entries2, "娄底市温度");
dataSet2.setDrawFilled(true);
dataSet2.setFillColor(Color.parseColor("#009AD1"));
dataSet2.setColor(Color.parseColor("#009AD1"));
dataSet2.setLineWidth(2);
dataSet2.setDrawCircleHole(false);
dataSet2.setCircleRadius(3);
dataSet2.setCircleColor(Color.parseColor("#009AD1"));
dataSet2.setValueTextSize(13);
dataSet2.setValueTextColor(Color.parseColor("#009AD1"));
dataSet2.setMode(LineDataSet.Mode.CUBIC_BEZIER);
// dataSets.add(dataSet);
// dataSets.add(dataSet2);
LineData lineData = new LineData(dataSet,dataSet2);
// LineData lineData = new LineData(dataSets);
line_chart.setData(lineData);
}
}
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)