android - 如何在 Kotlin 中使用 MPAndroidChart 为条形图添加带有一些详细信息的标记?
问题描述
我使用 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
解决方案
您可以定义自定义标记视图,声明一个扩展该类的MarkerView
类。
- 为您的标记视图定义自定义布局 (
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>
- 创建自定义类 (
CustomMarkerView
) 扩展MarkerView
。
此类必须接收图表中显示的数据数组并覆盖该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
推荐阅读
- firebase - 无法从 Firebase 存储中获取实际的字符串下载 url,并且只返回“未来的实例”
' 甚至使用 async/await - javascript - Passport JS 和自定义 async/await 函数
- java - 等待电子邮件
- sql - 由 CSV 支持的 Flink SQL 表,带有标题
- spring - 无法从可选加载配置数据:configserver:http//localhost:8012
- google-cloud-platform - 如何在大型查询计划作业上创建警报并在失败时发送电子邮件?
- java - 是否可以在 android studio 的可滚动视图中应用实时背景?
- xamarin.forms - 是否可以在运行时替换/修改隐式样式 xamarin 表单
- java - 如何在java中找到字符串的总和
- jquery - 填充使用 jquery 动态添加的选择列表