Android Highcharts Wrapper点击事件后图表不重绘问题求助

问题分析 #

当前代码存在三个核心问题导致点击后背景色不显示：

1. PlotBand 范围设置错误：from 和 to 的值逻辑错误，无法覆盖目标列的区域
2. 未触发图表重绘：仅修改了本地 xaxis 对象的 plotBands 属性，但未通知图表实例更新配置
3. 未复用图表现有配置：直接操作本地对象，修改无法同步到图表的实际运行实例

修复后的代码实现 #

1. 修正点击事件逻辑 #

修改点击回调部分，通过 chartContext 获取图表实例，正确设置 PlotBand 并触发重绘：

plotOptions.column.point = customClickEvent { chartContext, clickedPosition ->
    clickedPosition?.let { xIndex ->
        // 获取图表实例及对应x轴
        val chart = chartContext.chart
        val xAxis = chart.xAxis[0] as HIXAxis

        // 清除旧的选中背景，避免叠加
        xAxis.plotBands?.clear()

        // 正确设置PlotBand范围：覆盖当前分类的所有柱子
        val plotBand = HIPlotBands().apply {
            color = HIColor.initWithHexValue("#FCFFC5")
            from = xIndex.toDouble() - 0.5
            to = xIndex.toDouble() + 0.5
            id = "selected-column-band"
        }

        // 更新plotBands并触发重绘
        xAxis.plotBands = arrayListOf(plotBand)
        chart.redraw(false) // false关闭重绘动画，可选true启用
    }
}

2. 修正 customClickEvent 函数的参数传递 #

确保回调能获取到 chartContext 实例：

private fun customClickEvent(function: (HIChartContext, Number?) -> Unit): HIPoint {
    val hiConsumer = HIConsumer<HIChartContext> { chartContext ->
        val prop = chartContext.getProperty("x")
        function.invoke(chartContext, prop as? Number)
    }

    val properties = arrayOf("x", "y")
    val clickEvent = HIFunction(hiConsumer, properties)

    val columnsPoint = HIPoint()
    val columnsEvents = HIEvents()
    columnsPoint.events = columnsEvents
    columnsPoint.events.click = clickEvent
    return columnsPoint
}

关键说明 #

• PlotBand 范围计算：分组柱状图中，每个分类的x轴坐标范围是 [xIndex-0.5, xIndex+0.5]，此范围能完全覆盖该分类下的所有柱子
• 图表重绘：必须调用 chart.redraw() 才能让配置修改生效，参数可控制是否启用重绘动画
• 清除旧背景：每次点击前清除之前的选中背景，避免多个背景叠加显示

内容的提问来源于stack exchange，提问作者Francesco Bocci