Highcharts-Android 中实现多图表工具提示互斥显示的技术方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07936/article/details/148466403

Highcharts-Android 中实现多图表工具提示互斥显示的技术方案

highcharts-android Android wrapper for Highcharts usage 项目地址: https://gitcode.com/gh_mirrors/hi/highcharts-android

背景介绍

在移动端数据可视化应用中，经常需要同时展示多个图表。当用户与这些图表交互时，工具提示(tooltip)的显示行为直接影响用户体验。Highcharts-Android作为一款强大的图表库，提供了丰富的配置选项来控制工具提示的显示逻辑。

问题场景

开发者在使用Highcharts-Android时遇到一个常见需求：当应用界面中存在多个独立图表时，希望确保同一时间只有一个图表的工具提示处于显示状态。也就是说，当用户点击或触摸一个图表的数据点时，其他图表上已经显示的工具提示应自动隐藏。

技术实现方案

基础配置

首先，我们需要为每个图表配置独立的工具提示，并确保它们不是共享模式：

val tooltip = HITooltip().apply {
    shared = false  // 确保每个系列有独立工具提示
    headerFormat = "<b>{series.name}</b><br />"
    pointFormat = "x = {point.x}, y = {point.y}"
}
options.tooltip = tooltip

事件监听与处理

核心思路是通过监听每个图表的数据点鼠标悬停事件(mouseOver)，在事件触发时隐藏其他图表的工具提示：

val line = HILine().apply {
    point = HIPoint().apply {
        events = HIEvents().apply {
            mouseOver = HIFunction(
                HIConsumer { _ ->
                    // 隐藏其他图表的工具提示
                    otherChartView.post {
                        otherChartView.options.tooltip?.hide()
                    }
                },
                arrayOf("x", "y")
            )
        }
    }
}

完整实现示例

以下是一个完整的Fragment实现，展示了如何管理两个图表间的工具提示互斥显示：

class ChartFragment : Fragment() {
    private lateinit var binding: FragmentChartBinding
    private lateinit var chartViews: List<HIChartView>

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, 
                            savedInstanceState: Bundle?): View {
        binding = FragmentChartBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        
        chartViews = listOf(binding.chart1, binding.chart2)
        chartViews.forEach { setupChart(it) }
    }

    private fun setupChart(chartView: HIChartView) {
        val options = HIOptions().apply {
            title = HITitle().apply { text = "示例图表" }
            xAxis = arrayListOf(HIXAxis().apply { tickInterval = 1 })
            yAxis = arrayListOf(HIYAxis().apply { type = "linear" })
            tooltip = HITooltip().apply {
                shared = false
                headerFormat = "<b>{series.name}</b><br />"
                pointFormat = "x = {point.x}, y = {point.y}"
            }
        }

        val otherChart = chartViews.firstOrNull { it != chartView }
        val series = HILine().apply {
            point = if (otherChart != null) {
                HIPoint().apply {
                    events = HIEvents().apply {
                        mouseOver = HIFunction(
                            HIConsumer { _ ->
                                otherChart.post { 
                                    otherChart.options.tooltip?.hide() 
                                }
                            },
                            arrayOf("x", "y")
                        )
                    }
                }
            } else null
            data = arrayListOf(1, 2, 4, 8, 16, 32, 64, 128, 256, 512)
        }

        options.series = arrayListOf(series)
        chartView.options = options
    }
}