You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MPAndroidChart:如何通过onValueSelected将PieChart切片显示值从百分比转实际金额?

实现PieChart点击切片切换百分比/实际金额显示

可以通过onValueSelected()实现需求,但你之前的写法无效,因为直接修改Entry的y值不会触发图表重新渲染,且百分比是通过ValueFormatter转换后显示的,并非直接使用Entry的原始值。下面是可行的实现方案:

核心思路

  1. 饼图的PieEntry存储实际金额,而非百分比;
  2. 自定义ValueFormatter,根据是否有选中切片,切换显示百分比或实际金额;
  3. 在onValueSelected()和onNothingSelected()中更新选中状态,触发图表刷新。

代码实现

1. 自定义ValueFormatter

根据需求选择以下两种实现之一:

方式一:仅选中的切片显示实际金额

class PieValueFormatter(
    private val chart: PieChart,
    private val percentFormatter: PercentFormatter = PercentFormatter(chart),
    private var selectedEntry: PieEntry? = null
) : ValueFormatter() {

    override fun getPieLabel(value: Float, pieEntry: PieEntry): String {
        // 选中的切片显示实际金额,其余显示百分比
        return if (pieEntry == selectedEntry) {
            String.format("%.2f", pieEntry.y) // 自定义实际金额的显示格式
        } else {
            percentFormatter.getPieLabel(value, pieEntry)
        }
    }

    fun updateSelectedEntry(entry: PieEntry?) {
        selectedEntry = entry
        chart.invalidate() // 刷新图表生效
    }
}

方式二:点击后所有切片都显示实际金额

class PieValueFormatter(
    private val chart: PieChart,
    private val percentFormatter: PercentFormatter = PercentFormatter(chart),
    private var isShowAmount: Boolean = false
) : ValueFormatter() {

    override fun getPieLabel(value: Float, pieEntry: PieEntry): String {
        return if (isShowAmount) {
            String.format("%.2f", pieEntry.y)
        } else {
            percentFormatter.getPieLabel(value, pieEntry)
        }
    }

    fun toggleShowAmount(show: Boolean) {
        isShowAmount = show
        chart.invalidate()
    }
}

2. 初始化饼图并设置监听

// 1. 准备数据:PieEntry的y值为实际金额
val expenseEntries = listOf(
    PieEntry(1500f, "房租"),
    PieEntry(800f, "餐饮"),
    PieEntry(500f, "交通")
)
val dataSet = PieDataSet(expenseEntries, "月度支出")
val pieData = PieData(dataSet)

// 2. 绑定自定义Formatter
val valueFormatter = PieValueFormatter(pieChart)
pieData.setValueFormatter(valueFormatter)

// 3. 配置饼图基础属性
pieChart.apply {
    data = pieData
    setUsePercentValues(true) // 开启百分比计算,让PercentFormatter正常工作
    legend.isEnabled = true
    invalidate() // 初始渲染
}

// 4. 设置点击监听
pieChart.setOnChartValueSelectedListener(object : OnChartValueSelectedListener {
    override fun onValueSelected(e: Entry?, h: Highlight?) {
        // 根据选择的Formatter方式调用对应方法
        // 方式一:
        valueFormatter.updateSelectedEntry(e as? PieEntry)
        // 方式二:
        // valueFormatter.toggleShowAmount(true)
    }

    override fun onNothingSelected() {
        // 方式一:
        valueFormatter.updateSelectedEntry(null)
        // 方式二:
        // valueFormatter.toggleShowAmount(false)
    }
})

关键说明

  • 不要直接修改Entry的y值,图表渲染依赖绑定的初始数据,修改后不会自动刷新;
  • setUsePercentValues(true)必须开启,否则PercentFormatter无法正确计算百分比;
  • 调用chart.invalidate()是触发图表重新渲染的关键,确保格式切换生效。

内容的提问来源于stack exchange,提问作者jane

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 21:15:41