如何在Android（Java）中实现可点击显示详情的多数据折线图？

1. 添加依赖 #

在Module级build.gradle中引入MPAndroidChart依赖：

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

同时确保项目根目录build.gradle包含jitpack仓库：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

2. 布局中添加折线图控件 #

在XML布局文件里定义LineChart：

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

3. 准备自定义数据实体（存储详情） #

为每个数据点绑定乡镇名称、项目明细等额外信息，自定义Entry子类：

public class TownProjectEntry extends Entry {
    private String townName;
    private String projectDetails;

    public TownProjectEntry(float x, float y, String townName, String projectDetails) {
        super(x, y);
        this.townName = townName;
        this.projectDetails = projectDetails;
    }

    // Getter方法
    public String getTownName() { return townName; }
    public String getProjectDetails() { return projectDetails; }
}

接着构建数据集：

List<TownProjectEntry> entries = new ArrayList<>();
// 示例数据：x轴索引、y轴项目数、乡镇名、详情
entries.add(new TownProjectEntry(0, 5, "XX乡", "生态项目2个，基建项目3个"));
entries.add(new TownProjectEntry(1, 8, "YY乡", "产业项目5个，民生项目3个"));
entries.add(new TownProjectEntry(2, 3, "ZZ乡", "水利项目3个"));

LineDataSet dataSet = new LineDataSet(entries, "乡镇项目数量");
// 配置数据集样式
dataSet.setColor(Color.parseColor("#2196F3"));
dataSet.setCircleColor(Color.parseColor("#F44336"));
dataSet.setLineWidth(2f);
dataSet.setCircleRadius(4f);
dataSet.setDrawValues(true); // 显示数据点数值

LineData lineData = new LineData(dataSet);

4. 配置折线图基础样式 #

在Activity/Fragment中初始化并调整图表样式：

LineChart lineChart = findViewById(R.id.lineChart);

// 隐藏默认描述文字
lineChart.getDescription().setEnabled(false);
// 启用触摸交互
lineChart.setTouchEnabled(true);
lineChart.setDragEnabled(true);
lineChart.setScaleEnabled(true);

// 配置X轴（显示乡镇名称）
XAxis xAxis = lineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
xAxis.setValueFormatter(new ValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
        int index = (int) value;
        if (index >= 0 && index < entries.size()) {
            return entries.get(index).getTownName();
        }
        return "";
    }
});

// 配置Y轴
YAxis leftYAxis = lineChart.getAxisLeft();
leftYAxis.setAxisMinimum(0f); // Y轴从0开始统计
leftYAxis.setDrawGridLines(true);
lineChart.getAxisRight().setEnabled(false); // 隐藏右侧Y轴

// 设置数据并刷新图表
lineChart.setData(lineData);
lineChart.invalidate();

5. 实现点击数据点展示详情 #

通过OnChartValueSelectedListener监听点击事件，触发详情弹窗：

lineChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
        if (e instanceof TownProjectEntry) {
            TownProjectEntry entry = (TownProjectEntry) e;
            // 自定义弹窗展示详情
            AlertDialog detailDialog = new AlertDialog.Builder(MainActivity.this)
                    .setTitle(entry.getTownName())
                    .setMessage(String.format("项目总数：%d\n\n项目明细：%s",
                            (int) entry.getY(), entry.getProjectDetails()))
                    .setPositiveButton("关闭", null)
                    .create();
            detailDialog.show();
        }
    }

    @Override
    public void onNothingSelected() {
        // 点击空白区域时的操作（可选）
    }
});

补充说明 #

• 如果不需要复杂的额外信息，也可以用默认Entry，通过e.setData()存储字符串格式的详情，点击时取出转换即可。
• 可根据需求调整折线颜色、数据点大小、填充效果等样式参数。

内容的提问来源于stack exchange，提问作者Shaikh Faizan