MPAndroidChart水平堆叠柱状图适配CardView宽度及去边框问题

布局调整 #

首先简化布局结构，移除多余的嵌套容器，并调整CardView的内边距相关属性，避免CardView自带的padding限制图表宽度：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardUseCompatPadding="false"
    app:cardPreventCornerOverlap="false"
    android:padding="0dp">

    <com.github.mikephil.charting.charts.HorizontalBarChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</androidx.cardview.widget.CardView>

图表代码关键修改 #

在数据配置代码中添加核心设置，解决宽度匹配、空白及边框问题：

val entries = ArrayList<BarEntry>()
entries.add(BarEntry(0f, floatArrayOf(10f, 30f, 10f, 30f)))

val set = BarDataSet(entries, "")
val colors = ArrayList<Int>()
colors.add(Color.GREEN)
colors.add(Color.RED)
colors.add(Color.GRAY)
colors.add(Color.YELLOW)
set.colors = colors

val data = BarData(set)
data.setDrawValues(false)
// 设置柱状图宽度占满x轴条目空间
data.barWidth = 0.95f
data.isHighlightEnabled = false

chart1.description.isEnabled = false
chart1.data = data

// 必须在绑定数据后调用，覆盖默认偏移，彻底清除周围空白
chart1.setViewPortOffsets(0f, 0f, 0f, 0f)
chart1.setExtraOffsets(0f, 0f, 0f, 0f)

// 关闭图表自身的黑色边框
chart1.setDrawBorders(false)

// 保留你原有的其他隐藏配置
chart1.setDrawGridBackground(false)
chart1.axisLeft.setDrawGridLines(false)
chart1.axisLeft.setDrawAxisLine(false)
chart1.axisLeft.isEnabled = false
chart1.axisLeft.setDrawLabels(false)
chart1.axisRight.setDrawGridLines(false)
chart1.axisRight.setDrawAxisLine(false)
chart1.axisRight.isEnabled = false
chart1.axisRight.setDrawLabels(false)
chart1.xAxis.setDrawGridLines(false)
chart1.xAxis.setDrawAxisLine(false)
chart1.xAxis.setDrawLabels(false)
chart1.legend.isEnabled = false

chart1.invalidate()

关键修改说明 #

• 布局调整：关闭CardView的cardUseCompatPadding和cardPreventCornerOverlap，并设置padding为0，消除CardView自带的内边距，让图表可以完全填充CardView。
• barWidth设置：data.barWidth = 0.95f让堆叠柱状图尽可能占满单个x轴条目的宽度，解决宽度不匹配父布局的问题（数值接近1即可，避免设置1导致柱体溢出）。
• 偏移设置时机：setViewPortOffsets和setExtraOffsets必须在绑定数据后调用，因为MPAndroidChart会在绑定数据后重新计算布局偏移，此时设置才能覆盖默认值，彻底清除周围空白。
• 去除黑色边框：调用chart1.setDrawBorders(false)关闭图表自身的黑色边框，这是你看到的图表周围黑边的来源。

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