MPAndroidChart仅3个数据点时折线图显示异常求助

我在应用中使用MPAndroidChart库展示折线图，依赖配置为：implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'。但当仅有3个数据点时，图表无法正常显示。

• 期望样式：折线完整展示，数据点对应位置正常分布
• 实际样式：折线被压缩到图表顶部，几乎看不到有效展示

以下是原实现代码：

chartView?.invalidate()
chartView?.setViewPortOffsets(0f, 0f, 0f, 0f)
chartView?.description?.isEnabled = false
chartView?.setTouchEnabled(true)
chartView?.isDragEnabled = true
chartView?.setScaleEnabled(false)
chartView?.setPinchZoom(false)
chartView?.setDrawGridBackground(false)
chartView?.maxHighlightDistance = 300f
val x: XAxis? = chartView?.xAxis
x?.isEnabled = Valse

val y = chartView?.axisLeft
y?.setLabelCount(0, false)
y?.isEnabled = false
y?.textColor = Color.GRAY
y?.setDrawGridLines(false)
y?.axisLineColor = Color.BLACK
chartView?.axisLeft?.axisMinimum = 0f
chartView?.axisRight?.axisMinimum = 0f

chartView?.axisRight?.isEnabled = false

chartView?.legend?.isEnabled = false

val values = ArrayList<Entry>()
values.add(Entry(0f, 4836.62f))
values.add(Entry(1f, 4856.41f))
values.add(Entry(2f, 4940.18f))

val set1: LineDataSet

if (chartView?.data != null &&
    chartView.data!!.dataSetCount > 0
) {
    set1 = chartView.data.getDataSetByIndex(0) as LineDataSet
    set1.values = values
    chartView.data.notifyDataChanged()
    chartView.notifyDataSetChanged()
    chartView.invalidate()
} else {
    // create a dataset and give it a type
    set1 = LineDataSet(values, "")
    set1.mode = LineDataSet.Mode.CUBIC_BEZIER
    set1.cubicIntensity = 0.2f
    set1.setDrawFilled(false)
    set1.setDrawCircles(false)
    set1.lineWidth = 1.5f
    set1.color = ContextCompat.getColor(activity, R.color.colorPrimary)
    indexValue?.text = arrIndexList?.last()?.indexValue.toString()
    change?.text = arrIndexList?.last()?.change.toString()
    changePercent?.text = arrIndexList?.last()?.changePercent.toString()

    val data = LineData(set1)
    data.setValueTextSize(9f)
    data.setDrawValues(false)
    chartView?.data = data
    chartView?.animateX(1500)
}

问题排查与修复 #

1. 拼写错误导致配置异常：代码中x?.isEnabled = Valse是拼写错误，应为false，错误写法会导致X轴配置失效。
2. Y轴范围设置不合理：强制将Y轴最小值设为0f，但数据值均在4800以上，导致图表Y轴范围被过度拉伸，折线被压缩到顶部区域。
3. 视口无偏移导致折线贴边：setViewPortOffsets(0f,0f,0f,0f)让折线紧贴图表边缘，视觉效果差。

修正后的代码 #

chartView?.invalidate()
// 给图表留少量边距，避免折线贴边
chartView?.setViewPortOffsets(10f, 10f, 10f, 10f)
chartView?.description?.isEnabled = false
chartView?.setTouchEnabled(true)
chartView?.isDragEnabled = true
chartView?.setScaleEnabled(false)
chartView?.setPinchZoom(false)
chartView?.setDrawGridBackground(false)
chartView?.maxHighlightDistance = 300f

val x: XAxis? = chartView?.xAxis
x?.isEnabled = false // 修正拼写错误：Valse -> false

val y = chartView?.axisLeft
y?.setLabelCount(0, false)
y?.isEnabled = false
y?.textColor = Color.GRAY
y?.setDrawGridLines(false)
y?.axisLineColor = Color.BLACK
// 移除强制设置0为最小值，让图表自动计算合适的Y轴范围
// chartView?.axisLeft?.axisMinimum = 0f
// chartView?.axisRight?.axisMinimum = 0f

chartView?.axisRight?.isEnabled = false
chartView?.legend?.isEnabled = false

val values = ArrayList<Entry>()
values.add(Entry(0f, 4836.62f))
values.add(Entry(1f, 4856.41f))
values.add(Entry(2f, 4940.18f))

val set1: LineDataSet

if (chartView?.data != null && chartView.data!!.dataSetCount > 0) {
    set1 = chartView.data.getDataSetByIndex(0) as LineDataSet
    set1.values = values
    chartView.data.notifyDataChanged()
    chartView.notifyDataSetChanged()
    chartView.invalidate()
} else {
    set1 = LineDataSet(values, "")
    set1.mode = LineDataSet.Mode.CUBIC_BEZIER
    set1.cubicIntensity = 0.2f
    set1.setDrawFilled(false)
    set1.setDrawCircles(false)
    set1.lineWidth = 1.5f
    set1.color = ContextCompat.getColor(activity, R.color.colorPrimary)
    
    indexValue?.text = arrIndexList?.last()?.indexValue.toString()
    change?.text = arrIndexList?.last()?.change.toString()
    changePercent?.text = arrIndexList?.last()?.changePercent.toString()

    val data = LineData(set1)
    data.setValueTextSize(9f)
    data.setDrawValues(false)
    chartView?.data = data
    
    // 手动设置X轴范围，给数据点左右留额外空间，折线展示更自然
    chartView?.xAxis?.axisMinimum = -0.5f
    chartView?.xAxis?.axisMaximum = 2.5f
    
    chartView?.animateX(1500)
}

关键修改说明 #

• 修正X轴配置的拼写错误，保证配置生效
• 移除Y轴最小值强制设置，让图表自动根据数据计算合适的Y轴范围，折线将占据图表主要区域
• 调整视口偏移参数，避免折线紧贴边缘
• 手动设置X轴范围，为3个数据点预留左右空间，提升展示效果

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