MPAndroidChart 中的图例被饼图截断？

Question

我正在使用 MPAndroid 图表库在我的应用程序中显示饼图 图例/图表描述标签未相互环绕 我用过

pieChart.legend.isWordWrapEnabled=true

但是没效果

这是我的xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".equity.EquityFragment">

<include
    android:id="@+id/pageTitleLayout"
    layout="@layout/page_title" />

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/pieChart"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pageTitleLayout" />
<include
    android:id="@+id/loader"
    layout="@layout/view_progress_loader"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是代码

private fun createChart(chartData:List<EquityPieChart>){
    val pieEntry= chartData.map { PieEntry(it.equity,it.name) }
    val rnd = Random()
    val colors = mutableListOf<Int>()
    for (i in chartData.indices){
        colors.add(Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)))
    }
    val dataSet=PieDataSet(pieEntry,getString(R.string.equity_title))
    dataSet.colors=colors
    binding.pieChart.data = PieData(dataSet)
    binding.pieChart.isDrawHoleEnabled=false
    binding.pieChart.legend.isWordWrapEnabled=true
    binding.pieChart.invalidate()

}

这是我在设备中获得的用户界面

Answer 1

图例的文本太大，无法容纳在图表内。一种方法是将它们保留在图表之外。 可以添加以下属性来完成此工作：

setDrawInside()

请使用此代码：

Legend l = pieChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setXEntrySpace(4f);
l.setYEntrySpace(0f);
l.setWordWrapEnabled(true);

这会将

legend

设置在图表之外。

Answer 2

我最终在 flexboxlayout 的帮助下做了这样的事情

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".equity.EquityFragment">

<include
    android:id="@+id/pageTitleLayout"
    layout="@layout/page_title" />

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/pieChart"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/chartLabels"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pageTitleLayout" />

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/chartLabels"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<include
    android:id="@+id/loader"
    layout="@layout/view_progress_loader"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>

图例布局

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="25dp"
android:padding="2dp">

<View
    android:id="@+id/legendBox"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:background="@color/primary_500"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="@+id/legendTitle"
    app:layout_constraintTop_toTopOf="@+id/legendTitle"/>

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/legendTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    tools:text="xxxxjdsfjsdfj"
    android:layout_marginStart="3dp"
    app:layout_constraintStart_toEndOf="@+id/legendBox"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
  </androidx.constraintlayout.widget.ConstraintLayout>

Kotlin 代码

 private fun createChart(chartData: List<EquityPieChart>) {
    val pieEntry = chartData.map { PieEntry(it.equity) }
    val rnd = Random()
    val colors = mutableListOf<Int>()
    for (i in chartData.indices) {
        colors.add(Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)))
    }
    val dataSet = PieDataSet(pieEntry, getString(R.string.equity_title))
    dataSet.colors = colors
    dataSet.valueTextSize = 14f
    dataSet.setDrawValues(false)
    dataSet.valueTextColor = ContextCompat.getColor(requireContext(), android.R.color.white)
    binding.pieChart.data = PieData(dataSet)
    binding.pieChart.isDrawHoleEnabled = false
    binding.pieChart.description = Description().apply { text="" }
    binding.pieChart.invalidate()
    binding.pieChart.animateY(1400, Easing.EaseInOutQuad);
    binding.pieChart.legend.isEnabled = false
    creatChartLabels(colors,chartData)
}

private fun creatChartLabels(colors:List<Int>,chartData: List<EquityPieChart>){
    for (i in chartData.indices) {
        val view=ItemLegendBinding.inflate(layoutInflater)
        view.legendBox.setBackgroundColor(colors[i])
        view.legendTitle.text=chartData[i].name
        binding.chartLabels.addView(view.root)
    }
}

输出

Answer 3

我遇到了类似的问题，但仅在平板电脑模式下使用图例标签。但是当我在最后使用“setData”方法时，正如您所提到的。我的问题得到解决，图例标签没有相互重叠。非常感谢你。

Answer 4

我使用同一个库并面临同样的问题。要解决此问题，请按照以下步骤操作：

1. 设置图例的属性，例如 legend.setWordWrapEnabled(true) 和 legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT)。
2. 最重要的是，在设置完饼图的所有属性后，将饼图的setData方法放在最后。