MPAndroidChart PieChart 标签在值之上

Posted 2023-02-19

【中文标题】MPAndroidChart PieChart 标签在值之上

【英文标题】：MPAndroidChart PieChart label on top of the value

【发布时间】：2021-12-01 01:28:20

【问题描述】：

在MPandroidChart 饼图中，是否可以在值的顶部显示标签？

【问题讨论】：

想要的结果看起来像您共享的图像还是不是您想要的样子？

@Jabbar，图片是预期的设计。我知道它是混合的（单行和两行），但我只想在值的顶部显示标签。

【参考方案1】：

正如在documentation 中看到的，有一个名为PieDataSet.ValuePosition 的枚举有一个常量OUTSIDE_SLICE

如果您检查 source code 中的饼图渲染器，您将找到这些值 drawXOutside drawYOutside xValuePosition yValuePosition 这表明在最坏的情况下您可以编辑源代码以定义位置.同样在源代码中，您会发现 transformedAngle 如果您希望标签根本不旋转，您可以将其设置为 0。

【参考方案2】：

您可以定义一个自定义的CustomPieChartRenderer，它是PieChartRenderer 的子类，并覆盖以下我们感兴趣的两个方法：

override fun drawEntryLabel(c: Canvas?, label: String, x: Float, y: Float)
override fun drawValue(c: Canvas?, valueText: String, x: Float, y: Float, color: Int)

当条目标签准备好在 Canvas 上的指定 x、y 位置绘制时，将调用 drawEntryLabel 函数。

drawValue 函数在准备好在 Canvas 上的指定 x、y 位置绘制值时调用。

上述每个超类函数都使用 c.drawText(label, x, y, mEntryLabelsPaint) 或 c.drawText(valueText, x, y, mValuePaint) 之类的 Paint 在 Canvas 上绘制文本。当准备好绘制标签值对时，将按顺序调用上述函数。因此，在CustomPieChartRenderer 中，当调用每个函数而不是调用超类来绘制文本时，我们将每个数据（值/标签）临时保存，并在我们同时拥有标签/值 x、y 位置时绘制它们。要将标签与值对齐，我们只需在每个文本的绘制阶段将 labelY 位置与 valueY 位置交换即可。

下面是CustomPieChartRenderer：

class CustomPieChartRenderer(chart: PieChart?, animator: ChartAnimator?, viewPortHandler: ViewPortHandler?) : PieChartRenderer(chart, animator, viewPortHandler) 

    private var mHasLabelData = false
    private var mHasValueData = false
    private var mEntryLabelCanvas: Canvas? = null
    private var mValueCanvas: Canvas? = null
    private var mEntryLabel: String = ""
    private var mValueText: String = ""
    private var mEntryLabelX = 0f
    private var mValueX = 0f
    private var mEntryLabelY = 0f
    private var mValueY = 0f
    private var mValueColor = 0

    override fun drawEntryLabel(c: Canvas?, label: String, x: Float, y: Float) 
        //instead of calling super save the label data temporary
        //super.drawEntryLabel(c, label, x, y)
        mHasLabelData = true
        //save all entry label information temporary
        mEntryLabelCanvas = c
        mEntryLabel = label
        mEntryLabelX = x
        mEntryLabelY = y
        //and check if we have both label and value data temporary to draw them
        checkToDrawLabelValue()
    

    override fun drawValue(c: Canvas?, valueText: String, x: Float, y: Float, color: Int) 
        //instead of calling super save the value data temporary
        //super.drawValue(c, valueText, x, y, color)
        mHasValueData = true
        //save all value information temporary
        mValueCanvas = c
        mValueText = valueText
        mValueX = x
        mValueY = y
        mValueColor = color
        //and check if we have both label and value data temporary to draw them
        checkToDrawLabelValue()
    

    private fun checkToDrawLabelValue() 
        if (mHasLabelData && mHasValueData) 
            drawLabelAndValue()
            mHasLabelData = false
            mHasValueData = false
        
    

    private fun drawLabelAndValue() 
        //to show label on top of the value just swap the mEntryLabelY with mValueY
        drawEntryLabelData(mEntryLabelCanvas, mEntryLabel, mEntryLabelX, mValueY)
        drawValueData(mValueCanvas, mValueText, mValueX, mEntryLabelY, mValueColor)
    

    //This is the same code used in super.drawEntryLabel(c, label, x, y) with any other customization you want in mEntryLabelsPaint
    private fun drawEntryLabelData(c: Canvas?, label: String, x: Float, y: Float) 
        val mEntryLabelsPaint: Paint = paintEntryLabels
        mEntryLabelsPaint.setColor(Color.BLACK)
        mEntryLabelsPaint.setTypeface(Typeface.DEFAULT_BOLD)
        mEntryLabelsPaint.setTextAlign(Paint.Align.CENTER)
        c?.drawText(label, x, y, mEntryLabelsPaint)
    

    //This is the same code used in super.drawValue(c, valueText, x, y, color) with any other customization you want in mValuePaint
    fun drawValueData(c: Canvas?, valueText: String, x: Float, y: Float, color: Int) 
        mValuePaint.color = color
        mValuePaint.textAlign = Paint.Align.CENTER
        c?.drawText(valueText, x, y, mValuePaint)
    

这是一个示例用法：

class PieChartActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.piechart_layout)

        val pieChart = findViewById<PieChart>(R.id.pieChart)

        //initialize a List of colors one for each slice
        val pieColors: ArrayList<Int> = ArrayList()
        pieColors.add(Color.parseColor("#0f2c4b"))
        pieColors.add(Color.parseColor("#1857a0"))
        pieColors.add(Color.parseColor("#238837"))
        pieColors.add(Color.parseColor("#3f9cff"))

        //initialize a List of PieEntry with its value/label pair
        val pieEntries: ArrayList<PieEntry> = ArrayList()
        pieEntries.add(PieEntry(40f, "NA"))
        pieEntries.add(PieEntry(18f, "MENA"))
        pieEntries.add(PieEntry(20f, "EU"))
        pieEntries.add(PieEntry(22f, "ASIA"))

        //prepare the PieDataSet with the above pieEntries and pieColors
        val pieDataSet = PieDataSet(pieEntries, "")
        pieDataSet.valueTextSize = 14f
        pieDataSet.colors = pieColors

        //draw value/label outside the pie chart
        pieDataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE
        pieDataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE
        pieDataSet.valueLinePart1OffsetPercentage = 100f
        pieDataSet.valueLinePart1Length = 0.8f
        pieDataSet.valueLinePart2Length = 0f
        pieDataSet.valueTextColor = Color.BLACK
        pieDataSet.valueTypeface = Typeface.DEFAULT_BOLD
        pieDataSet.valueLineColor = ColorTemplate.COLOR_NONE

        //prepare the PieData
        val pieData = PieData(pieDataSet)
        pieData.setValueTextColor(Color.BLACK)
        pieData.setDrawValues(true)
        pieData.setValueFormatter(PercentFormatter(pieChart))

        //set pieChart data and any other pieChart property needed
        pieChart.data = pieData
        pieChart.setExtraOffsets(35f, 35f, 35f, 35f)
        pieChart.setEntryLabelColor(Color.BLACK)
        pieChart.setEntryLabelTextSize(14f)
        pieChart.setEntryLabelTypeface(Typeface.DEFAULT_BOLD)
        pieChart.setUsePercentValues(true)
        pieChart.legend.isEnabled = false
        pieChart.description.isEnabled = false
        pieChart.isRotationEnabled = true
        pieChart.dragDecelerationFrictionCoef = 0.9f
        pieChart.rotationAngle = 220f
        pieChart.isHighlightPerTapEnabled = true
        pieChart.animateY(1400, Easing.EaseInOutQuad)
        pieChart.setHoleColor(Color.WHITE)

        //set the custom renderer (CustomPieChartRenderer) used to draw each label on top of the value and call invalidate to redraw the chart
        pieChart.renderer = CustomPieChartRenderer(pieChart, pieChart.animator, pieChart.viewPortHandler)
        pieChart.invalidate()
    

饼图 XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="@color/white">

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieChart"
        android:layout_
        android:layout_ />

</RelativeLayout>

结果：

注意：这是用'com.github.PhilJay:MPAndroidChart:v3.1.0'测试的

【讨论】：

谢谢！您的回答让我朝着正确的方向前进，我解决了我的问题。