如何使用MPAndroidChart实现展示时段费率的条形时间线？

刚好之前做过类似的时段费率展示需求，用MPAndroidChart的BarChart就能完美实现你要的时间线条形效果，结合自定义X轴标签就能还原你给出的示例图样式，具体步骤如下：

1. 添加MPAndroidChart依赖 #

先在你的app/build.gradle文件中添加依赖（这里用的是主流稳定版本，你也可以替换为最新版）：

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

2. 布局中加入BarChart控件 #

在需要展示图表的XML布局里添加BarChart：

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/rateTimelineChart"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:padding="16dp"/>

3. 准备时段与费率数据 #

先定义好你的时段文本和对应费率，再转换成MPAndroidChart需要的BarEntry格式：

// 示例时段与费率数据，你可以根据实际需求修改
val timePeriods = listOf(
    "00:00-07:00",
    "07:00-10:00",
    "10:00-17:00",
    "17:00-20:00",
    "20:00-24:00"
)
val rates = listOf(10f, 15f, 12f, 18f, 14f)

// 转换为BarEntry列表
val barEntries = mutableListOf<BarEntry>()
rates.forEachIndexed { index, rate ->
    barEntries.add(BarEntry(index.toFloat(), rate))
}

// 创建数据集并配置基础样式
val barDataSet = BarDataSet(barEntries, "时段费率")
barDataSet.color = ContextCompat.getColor(this, R.color.blue_500) // 设置条形统一颜色
barDataSet.setDrawValues(true) // 显示条形顶部的费率数值

// 封装为BarData
val barData = BarData(barDataSet)
barData.barWidth = 0.6f // 设置条形宽度，避免过宽或过窄

4. 配置图表核心样式（关键步骤） #

这一步主要是把X轴默认的数值标签替换成自定义的时段文本，同时优化图表的显示效果：

val chart = findViewById<BarChart>(R.id.rateTimelineChart)
chart.data = barData

// 配置X轴
val xAxis = chart.xAxis
xAxis.position = XAxis.XAxisPosition.BOTTOM // X轴放在底部
xAxis.setDrawGridLines(false) // 隐藏X轴网格线
xAxis.setLabelCount(timePeriods.size, true) // 设置标签数量和时段数一致
// 自定义X轴标签格式化器，把数值索引替换成时段文本
xAxis.valueFormatter = object : ValueFormatter() {
    override fun getFormattedValue(value: Float): String {
        val index = value.toInt()
        return if (index in timePeriods.indices) timePeriods[index] else ""
    }
}
xAxis.labelRotationAngle = 45f // 旋转标签避免重叠

// 配置Y轴
chart.axisRight.isEnabled = false // 隐藏右侧Y轴
val leftYAxis = chart.axisLeft
leftYAxis.axisMinimum = 0f // Y轴最小值设为0，避免费率为0时显示异常
leftYAxis.setDrawGridLines(true) // 显示Y轴网格线辅助读数

// 隐藏不必要的元素
chart.legend.isEnabled = false // 隐藏图例
chart.description.isEnabled = false // 隐藏底部描述文本

// 允许触摸缩放（可选需求）
chart.setScaleEnabled(true)

// 刷新图表
chart.invalidate()

5. 可选优化细节 #

• 如果需要每个时段的条形颜色不同，可以用barDataSet.colors = listOf(...)设置颜色列表
• 若要显示时段之间的分隔线，可以结合LineChart绘制垂直辅助线，或者使用CombinedChart整合两种图表
• 调整条形间距可以通过chart.groupSpace（分组条形场景）或微调barWidth实现

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