如何使用MPAndroidChart的LineChart绘制Glycaemia类Java对象

我来一步步教你把Glycaemia类的数据绘制成折线图，这个需求我之前做健康数据可视化时也碰到过，实操性很强：

1. 先搞定MPAndroidChart的集成 #

首先得把库加到项目里，在app级的build.gradle（或build.gradle.kts）中添加依赖：

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' // 建议用最新稳定版本
}

如果是Gradle 7及以上版本，记得在settings.gradle里添加JitPack仓库：

dependencyResolutionManagement {
    repositories {
        // 其他仓库...
        maven { url 'https://jitpack.io' }
    }
}

2. 在布局中加入LineChart组件 #

在你的Activity/Fragment布局文件里，添加折线图的容器：

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/lineChart"
    android:layout_width="match_parent"
    android:layout_height="300dp" />

3. 把Glycaemia列表转换成LineChart需要的Entry集合 #

LineChart用Entry类存储每个数据点的坐标，我们需要把Glycaemia的血糖值作为Y轴，日期转换成合适的X轴值（比如时间戳，保证数据按时间顺序排列）。

注意：先给Glycaemia类补充getter方法，不然没法读取私有字段：

public float getGlycaemia() {
    return glycaemia;
}

public String getDate_of_addition() {
    return date_of_addition;
}

public String getNotes_by_the_user() {
    return notes_by_the_user;
}

假设你有一个List<Glycaemia> glycaemiaList，现在开始转换数据：

List<Entry> entries = new ArrayList<>();
// 先按日期排序，确保折线是时间正序
Collections.sort(glycaemiaList, (g1, g2) -> g1.getDate_of_addition().compareTo(g2.getDate_of_addition()));

for (int i = 0; i < glycaemiaList.size(); i++) {
    Glycaemia g = glycaemiaList.get(i);
    long timestamp = 0;
    try {
        // 这里要和你date_of_addition的格式匹配，比如"yyyy-MM-dd HH:mm"
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm", Locale.getDefault());
        Date date = sdf.parse(g.getDate_of_addition());
        timestamp = date.getTime(); // 转成时间戳作为X轴值
    } catch (ParseException e) {
        e.printStackTrace();
        // 解析失败的话，用列表索引作为X轴值
        timestamp = i;
    }
    // 添加数据点：X是时间戳/索引，Y是血糖值
    entries.add(new Entry(timestamp, g.getGlycaemia()));
}

4. 创建数据集并绑定到图表 #

把Entry集合包装成LineDataSet，再放入LineData，最后设置给LineChart：

LineDataSet dataSet = new LineDataSet(entries, "血糖趋势"); // 折线的图例标签
// 自定义折线样式
dataSet.setColor(Color.parseColor("#2196F3"));
dataSet.setCircleColor(Color.parseColor("#FF5722"));
dataSet.setLineWidth(2f);
dataSet.setCircleRadius(4f);
dataSet.setDrawValues(true); // 显示每个点的数值

LineData lineData = new LineData(dataSet);
LineChart lineChart = findViewById(R.id.lineChart);
lineChart.setData(lineData);

5. 配置X轴，显示日期而非数字 #

默认X轴会显示时间戳或索引，我们需要自定义格式化器来显示友好的日期：

XAxis xAxis = lineChart.getXAxis();
xAxis.setValueFormatter(new ValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
        // 把时间戳转回日期字符串
        SimpleDateFormat sdf = new SimpleDateFormat("MM-dd HH:mm", Locale.getDefault());
        return sdf.format(new Date((long) value));
    }
});
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // X轴放在底部
xAxis.setLabelRotationAngle(45f); // 旋转标签避免重叠
xAxis.setGranularity(3600000f); // 设置最小间隔为1小时，防止标签过密

6. 可选：添加点击显示备注的功能 #

如果想点击数据点时显示对应的用户备注，可以自定义MarkerView：
先创建一个标记布局marker_view.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/marker_bg"
    android:orientation="vertical"
    android:padding="8dp">

    <TextView
        android:id="@+id/tvGlycaemia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/tvNotes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="12sp" />
</LinearLayout>

然后创建MarkerView类：

public class GlycaemiaMarkerView extends MarkerView {
    private TextView tvGlycaemia;
    private TextView tvNotes;
    private List<Glycaemia> glycaemiaList;

    public GlycaemiaMarkerView(Context context, int layoutResource, List<Glycaemia> list) {
        super(context, layoutResource);
        tvGlycaemia = findViewById(R.id.tvGlycaemia);
        tvNotes = findViewById(R.id.tvNotes);
        glycaemiaList = list;
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        // 根据高亮的索引找到对应的Glycaemia对象
        Glycaemia g = glycaemiaList.get((int) highlight.getX());
        tvGlycaemia.setText("血糖值: " + g.getGlycaemia());
        tvNotes.setText("备注: " + g.getNotes_by_the_user());
        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        // 调整标记位置，避免遮挡数据点
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }
}

最后绑定到图表：

GlycaemiaMarkerView markerView = new GlycaemiaMarkerView(this, R.layout.marker_view, glycaemiaList);
lineChart.setMarker(markerView);

7. 刷新图表生效 #

所有配置完成后，调用刷新方法让图表显示：

lineChart.invalidate();

这样就能把你的血糖数据绘制成清晰的折线图了，要是想调整Y轴范围、网格线样式等细节，直接修改LineChart的对应配置项就行。

内容的提问来源于stack exchange，提问作者Mark.