MPAndroidChart PieChart 标签在值的顶部
MPAndroidChart PieChart label on top of the value
在MPAndroidChart饼图中，是否可以在值的顶部显示标签？
正如在 documentation 中看到的那样，有一个名为 PieDataSet.ValuePosition 的枚举有一个常量 OUTSIDE_SLICE
如果您在 source code 中检查 Pie Chart Renderer，您将找到这些值 drawXOutside drawYOutside xValuePosition yValuePosition，这表明在更糟的情况下案例场景，您可以编辑源代码来定义位置。同样在源代码中，您会发现 transformedAngle 如果您希望标签完全不旋转，您可以将其设置为 0。
您可以定义一个自定义 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 函数。
当准备好在 Canvas 上指定的 x、y 位置绘制值时，将调用 drawValue 函数。
上述每个超类函数都使用 c.drawText(label, x, y, mEntryLabelsPaint) 或 c.drawText(valueText, x, y, mValuePaint) 之类的 Paint 在 Canvas 上绘制文本。当准备好绘制标签值对时，将依次调用上述函数。因此，在 CustomPieChartRenderer 中，当每个函数被调用而不是调用超类来绘制文本时，我们临时保存每个数据 (value/label) 并在我们同时具有 label/value 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_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
结果：
注意：这是用 'com.github.PhilJay:MPAndroidChart:v3.1.0'
测试的
在MPAndroidChart饼图中，是否可以在值的顶部显示标签？
正如在 documentation 中看到的那样，有一个名为 PieDataSet.ValuePosition 的枚举有一个常量 OUTSIDE_SLICE
如果您在 source code 中检查 Pie Chart Renderer，您将找到这些值 drawXOutside drawYOutside xValuePosition yValuePosition，这表明在更糟的情况下案例场景，您可以编辑源代码来定义位置。同样在源代码中，您会发现 transformedAngle 如果您希望标签完全不旋转，您可以将其设置为 0。
您可以定义一个自定义 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 函数。
当准备好在 Canvas 上指定的 x、y 位置绘制值时，将调用 drawValue 函数。
上述每个超类函数都使用 c.drawText(label, x, y, mEntryLabelsPaint) 或 c.drawText(valueText, x, y, mValuePaint) 之类的 Paint 在 Canvas 上绘制文本。当准备好绘制标签值对时，将依次调用上述函数。因此，在 CustomPieChartRenderer 中，当每个函数被调用而不是调用超类来绘制文本时，我们临时保存每个数据 (value/label) 并在我们同时具有 label/value 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_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
结果：
注意：这是用 'com.github.PhilJay:MPAndroidChart:v3.1.0'