Android中如何检测用户在Highcharts图表上的抬手事件？

问题原因 #

HIChartView本质是封装WebView加载Highcharts JS图表，WebView会拦截所有触摸事件并传递给内部JS逻辑，所以直接给HIChartView或其rootView设置setOnTouchListener无法获取到触摸事件。

解决方案：通过JS事件+Android JS桥实现监听 #

利用Highcharts JS的触摸/鼠标事件监听，再通过JS桥回调到Android端执行操作，步骤如下：

1. 配置Highcharts JS事件
   在设置图表选项时，给series添加mouseup（对应手指抬起）事件，触发时调用Android端的回调方法：

// 初始化图表选项
val chartOptions = HIChartOptions()

// 配置plotOptions，监听series的mouseup事件
val plotOptions = HIPlotOptions().apply {
    series = HISeries().apply {
        events = HIEvents().apply {
            // 监听mouseup事件，触发时调用Android端的onChartTouchUp方法
            mouseup = HIFunction(
                function = """function() {
                    Android.onChartTouchUp();
                }"""
            )
        }
    }
}

chartOptions.plotOptions = plotOptions
// 将配置设置给HIChartView
binder.chart.options = chartOptions

2. 给WebView注册JS接口
   获取HIChartView内部的WebView，注册JS接口让JS可以调用Android方法：

// 获取HIChartView内部的WebView（部分版本可直接调用getWebView()，或通过getChildAt(0)获取）
val webView = binder.chart.getChildAt(0) as WebView

// 启用JavaScript（必须）
webView.settings.javaScriptEnabled = true

// 注册JS接口，名称"Android"要和JS代码里的调用名称一致
webView.addJavascriptInterface(object : Any() {
    @JavascriptInterface // 必须添加此注解，否则JS无法调用
    fun onChartTouchUp() {
        // 这里处理手指抬起后的业务逻辑
        Log.d("Chart", "手指从图表抬起，执行操作")
        // 你的代码...
    }
}, "Android")

3. 混淆配置（如果开启了混淆）
   在proguard-rules.pro中添加规则，避免JS接口方法被混淆：

-keepclassmembers class com.yourpackage.YourClass$* {
    @android.webkit.JavascriptInterface <methods>;
}

补充说明 #

• 也可以使用JS的touchend事件替代mouseup，两者在触摸设备上均可触发，根据需求选择即可。
• 确保HIChartView的WebView已正确初始化，避免在视图未加载完成时执行以上代码。

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