MPAndroidChart - Piechart - пользовательские линии надписей

Question

Я пытаюсь нарисовать линии меток, как на картинке, используя MPAndroidChart с графиком ap ie. Я не могу понять, как

1. отделить линии от графика
2. нарисовать этот маленький кружок в начале линии.

Спасибо.

Answer 1

Этого отнюдь не легко достичь. Чтобы отделить линии от графика, вы можете использовать valueLinePart1OffsetPercentage и играть с длинами частей линии. Но чтобы диаграмма нарисовала точки в конце линий, вам нужен пользовательский рендер. Вот один из них:

class CustomPieChartRenderer(pieChart: PieChart, val circleRadius: Float)
    : PieChartRenderer(pieChart, pieChart.animator, pieChart.viewPortHandler) {

    override fun drawValues(c: Canvas) {
        super.drawValues(c)

        val center = mChart.centerCircleBox

        val radius = mChart.radius
        var rotationAngle = mChart.rotationAngle
        val drawAngles = mChart.drawAngles
        val absoluteAngles = mChart.absoluteAngles

        val phaseX = mAnimator.phaseX
        val phaseY = mAnimator.phaseY

        val roundedRadius = (radius - radius * mChart.holeRadius / 100f) / 2f
        val holeRadiusPercent = mChart.holeRadius / 100f
        var labelRadiusOffset = radius / 10f * 3.6f

        if (mChart.isDrawHoleEnabled) {
            labelRadiusOffset = (radius - radius * holeRadiusPercent) / 2f
            if (!mChart.isDrawSlicesUnderHoleEnabled && mChart.isDrawRoundedSlicesEnabled) {
                rotationAngle += roundedRadius * 360 / (Math.PI * 2 * radius).toFloat()
            }
        }

        val labelRadius = radius - labelRadiusOffset

        val dataSets = mChart.data.dataSets

        var angle: Float
        var xIndex = 0

        c.save()
        for (i in dataSets.indices) {
            val dataSet = dataSets[i]
            val sliceSpace = getSliceSpace(dataSet)
            for (j in 0 until dataSet.entryCount) {
                angle = if (xIndex == 0) 0f else absoluteAngles[xIndex - 1] * phaseX
                val sliceAngle = drawAngles[xIndex]
                val sliceSpaceMiddleAngle = sliceSpace / (Utils.FDEG2RAD * labelRadius)
                angle += (sliceAngle - sliceSpaceMiddleAngle / 2f) / 2f

                if (dataSet.valueLineColor != ColorTemplate.COLOR_NONE) {
                    val transformedAngle = rotationAngle + angle * phaseY
                    val sliceXBase = cos(transformedAngle * Utils.FDEG2RAD.toDouble()).toFloat()
                    val sliceYBase = sin(transformedAngle * Utils.FDEG2RAD.toDouble()).toFloat()
                    val valueLinePart1OffsetPercentage = dataSet.valueLinePart1OffsetPercentage / 100f
                    val line1Radius = if (mChart.isDrawHoleEnabled) {
                        (radius - radius * holeRadiusPercent) * valueLinePart1OffsetPercentage + radius * holeRadiusPercent
                    } else {
                        radius * valueLinePart1OffsetPercentage
                    }
                    val px = line1Radius * sliceXBase + center.x
                    val py = line1Radius * sliceYBase + center.y

                    if (dataSet.isUsingSliceColorAsValueLineColor) {
                        mRenderPaint.color = dataSet.getColor(j)
                    }
                    c.drawCircle(px, py, circleRadius, mRenderPaint)
                }

                xIndex++
            }
        }
        MPPointF.recycleInstance(center)
        c.restore()
    }
}

Этот пользовательский рендерер расширяет рендерер диаграммы p ie по умолчанию. Я просто скопировал код из метода PieChartRenderer.drawValues, преобразовал его в Kotlin и удалил все ненужное. Я сохранил только логику c, необходимую для определения положения точек в конце линий.

Я попытался воспроизвести изображение, которое вы показали:

val chart: PieChart = view.findViewById(R.id.pie_chart)
chart.setExtraOffsets(40f, 0f, 40f, 0f)

// Custom renderer used to add dots at the end of value lines.
chart.renderer = CustomPieChartRenderer(chart, 10f)

val dataSet = PieDataSet(listOf(
        PieEntry(40f),
        PieEntry(10f),
        PieEntry(10f),
        PieEntry(15f),
        PieEntry(10f),
        PieEntry(5f),
        PieEntry(5f),
        PieEntry(5f)
), "Pie chart")

// Chart colors
val colors = listOf(
        Color.parseColor("#4777c0"),
        Color.parseColor("#a374c6"),
        Color.parseColor("#4fb3e8"),
        Color.parseColor("#99cf43"),
        Color.parseColor("#fdc135"),
        Color.parseColor("#fd9a47"),
        Color.parseColor("#eb6e7a"),
        Color.parseColor("#6785c2"))
dataSet.colors = colors
dataSet.setValueTextColors(colors)

// Value lines
dataSet.valueLinePart1Length = 0.6f
dataSet.valueLinePart2Length = 0.3f
dataSet.valueLineWidth = 2f
dataSet.valueLinePart1OffsetPercentage = 115f  // Line starts outside of chart
dataSet.isUsingSliceColorAsValueLineColor = true

// Value text appearance
dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE
dataSet.valueTextSize = 16f
dataSet.valueTypeface = Typeface.DEFAULT_BOLD

// Value formatting
dataSet.valueFormatter = object : ValueFormatter() {
    private val formatter = NumberFormat.getPercentInstance()

    override fun getFormattedValue(value: Float) =
            formatter.format(value / 100f)
}
chart.setUsePercentValues(true)

dataSet.selectionShift = 3f

// Hole
chart.isDrawHoleEnabled = true
chart.holeRadius = 50f

// Center text
chart.setDrawCenterText(true)
chart.setCenterTextSize(20f)
chart.setCenterTextTypeface(Typeface.DEFAULT_BOLD)
chart.setCenterTextColor(Color.parseColor("#222222"))
chart.centerText = "Center\ntext"

// Disable legend & description
chart.legend.isEnabled = false
chart.description = null

chart.data = PieData(dataSet)

Опять же, не очень простой. Я надеюсь, вам понравится Kotlin! Вы можете переместить большую часть этого кода конфигурации в подкласс, если вам это нужно часто. Вот результат:

Я не эксперт MPAndroidChart. На самом деле, я использовал его только один раз, и это было 2 года go. Но если вы проводите исследования, вы можете найти решение большую часть времени. К счастью, MPAndroidChart очень настраиваемый.