如何在 Kotlin 中使用 MPAndroidChart 为条形图添加带有一些细节的标记？

Question

我使用 MPAndroidChart 库创建了一个堆叠的 BarChart，现在当用户点击条形图时，我想显示一个 marker 一些细节如下图所示：

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

编辑

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

您可以定义自定义标记视图，声明 class 扩展 MarkerView class.

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="6dp"
    android:layout_marginRight="6dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txtViewData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"/>

</LinearLayout>

创建扩展 MarkerView.
的自定义 class (CustomMarkerView) 此 class 必须接收图表中显示的数据数组并覆盖 refreshContent 方法，以便显示数据。
getOffset 方法是可选的，用于调整标记在屏幕上的位置。

class CustomMarkerView(
        context: Context,
        layout: Int,
        private val dataToDisplay: MutableList<Float>
) : MarkerView(context, layout) {

    private var txtViewData: TextView? = null

    init {
        txtViewData = findViewById(R.id.txtViewData)
    }

    override fun refreshContent(e: Entry?, highlight: Highlight?) {
        try {
            val xAxis = e?.x?.toInt() ?: 0
            txtViewData?.text = dataToDisplay[xAxis].toString()
        } catch (e: IndexOutOfBoundsException) { }

        super.refreshContent(e, highlight)
    }

    override fun getOffset(): MPPointF {
        return MPPointF(-(width / 2f), -height.toFloat())
    }
}

然后您可以将标记分配给您的图表：

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

如何在 Kotlin 中使用 MPAndroidChart 为条形图添加带有一些细节的标记？

How to add a marker with some details for Bar Chart using MPAndroidChart in Kotlin?

charts

android

bar-chart

kotlin

mpandroidchart