如何在 Kotlin 中使用 MPAndroidChart 为条形图添加包含一些详细信息的标记？

Question

我使用 MPAndroidChart库创建了一个堆叠条形图，现在当用户单击条形图时，我想显示一个包含一些详细信息的标记，如下图所示：

我发现了关于这个主题的不同主题，但找不到明确的解决方案，所以如果可以的话请帮助我。谢谢！

编辑

 for (item in dataTicketsList) {
        if (i <= 2) {

            val firstValue: String = transformDataForChart(item.values.first!!)
            hoursValuesArray.add(firstValue.toFloat())

            val secondValue: String = transformDataForChart(item.values.second!!)
            hoursValuesArray.add(secondValue.toFloat())

            val thirdValue: String = transformDataForChart(item.values.third!!)
            hoursValuesArray.add(thirdValue.toFloat())

            entriesVerticalBar.add(BarEntry(i, hoursValuesArray.toFloatArray()))
            i++
            hoursValuesArray.clear()

            if (item.label!!.contains("." + (Calendar.getInstance().get(Calendar.YEAR) - 1).toString())) {
                val date: String = item.label!!.replace("." + (Calendar.getInstance().get(Calendar.YEAR) - 1).toString(), "")
                barLabesArrayList.add(date)
            } else if (item.label!!.contains("." + (Calendar.getInstance().get(Calendar.YEAR)).toString())) {
                val date: String = item.label!!.replace("." + (Calendar.getInstance().get(Calendar.YEAR)).toString(), "")
                barLabesArrayList.add(date)
            }
        }
    }

    verticalBarChartColors.add(Color.rgb(89, 93, 223))
    verticalBarChartColors.add(Color.rgb(25, 227, 180))
    verticalBarChartColors.add(Color.rgb(85, 164, 206))
    val markerView = CustomMarkerView(requireContext(), R.layout.custom_marker_view_layout, hoursValuesArray )
    var barDataSet = BarDataSet(entriesVerticalBar, "")
    val barChart: BarChart = bar_chart_details
    barDataSet.colors = verticalBarChartColors
    barDataSet.valueTextSize = 8f
    barDataSet.stackLabels = arrayOf("00:00 - 06:00 h", "06:00 - 18:00 h", "18:00 - 24:00 h")
    barDataSet.valueTextColor = resources.getColor(R.color.white)
    val barData = BarData(barDataSet)
    barData.setValueFormatter(VerticalBarChart.DecimalRemover(DecimalFormat("###")))
    barChart.data = barData
    barChart.marker = markerView

Answer 1

您可以定义自定义标记视图，声明一个扩展该类的类MarkerView。

\n

\n
1. 为您的标记视图定义自定义布局 ( custom_marker_view.xml)。
   \n您可以根据需要使用布局或其他视图自定义此布局。
\n

\n

<LinearLayout\n    xmlns:android="http://schemas.android.com/apk/res/android"\n    android:layout_width="wrap_content"\n    android:layout_height="wrap_content"\n    android:layout_marginLeft="6dp"\n    android:layout_marginRight="6dp"\n    android:orientation="vertical">\n\n    <TextView\n        android:id="@+id/txtViewData"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content"\n        android:layout_gravity="center"\n        android:gravity="center"/>\n\n</LinearLayout>\n

\n

\n
2. 创建自定义类 ( CustomMarkerView) 扩展MarkerView。
   \n此类必须接收图表中显示的数据数组并重写该refreshContent方法，以便显示数据。
   \n getOffset\xc2\xa0 方法是可选的，它用于调整屏幕上标记的位置。
\n

\n

class CustomMarkerView(\n        context: Context,\n        layout: Int,\n        private val dataToDisplay: MutableList<Float>\n) : MarkerView(context, layout) {\n\n    private var txtViewData: TextView? = null\n\n    init {\n        txtViewData = findViewById(R.id.txtViewData)\n    }\n\n    override fun refreshContent(e: Entry?, highlight: Highlight?) {\n        try {\n            val xAxis = e?.x?.toInt() ?: 0\n            txtViewData?.text = dataToDisplay[xAxis].toString()\n        } catch (e: IndexOutOfBoundsException) {\xc2\xa0}\n\n        super.refreshContent(e, highlight)\n    }\n\n    override fun getOffset(): MPPointF {\n        return MPPointF(-(width / 2f), -height.toFloat())\n    }\n}\n

\n

\n
3. 然后，您可以使用以下命令将标记分配给图表：
\n

\n

val marker = new CustomMarkerView(this, R.layout.custom_marker_view, <your-array-of-data>)\nchart.marker = marker\n

\n