点击图例旁边的空白处，可以取消选中的焦点，想问一下这个点击事件如何捕捉

[szweee]

选中焦点和不选中的时候我有列表想展示不同的数据

[AAChartModel]

Highcharts 貌似没有提供这个点击事件的回调功能, 我暂时没找到相关 API, 你可以到 Highcharts 的 GitHub 官方页面提问看看.

[szweee]

好的 谢谢 我去看看。
再问一下 图例的点击事件可以获取到吗

[AAChartModel]

问:

Highcharts 怎么获取 legend 点击事件回调?

以下是 chatGPT 回答:

在 Highcharts 中，可以通过 legendItemClick 事件来获取 legend 点击事件的回调。当用户点击图例中的一个图例项时，该事件将被触发。

以下是一个示例代码，展示如何使用 legendItemClick 事件回调函数：

Highcharts.chart('container', {
    // 图表配置项...
    legend: {
        // 图例配置项...
        itemEvents: {
            legendItemClick: function(event) {
                // 在这里编写图例点击事件的回调逻辑
                console.log('Legend item clicked:', event.target.name);
            }
        }
    },
    // 数据系列配置项...
});

在上面的示例中，我们在 legend 配置项中的 itemEvents 对象中定义了 legendItemClick 事件的回调函数。当用户点击图例项时，回调函数将被触发，并且可以访问 event 对象来获取有关点击事件的信息。

在回调函数中，你可以编写任何你想要执行的逻辑。上面的示例中，我们简单地将点击的图例项的名称打印到控制台上。

请注意，上述示例是使用 JavaScript 编写的，如果你需要在其他编程语言中使用 Highcharts，你需要相应地调整代码。

[AAChartModel]

回到 AAChartKit-Swift, 在 demo 中, 有自定义 legend 的点击事件的回调的示例, 示例代码如下:

    //图表自带的图例点击事件是：
    //点击某个显示/隐藏的图例，该图例对应的serie就隐藏/显示。
    //个人觉得不合理，正常来说，有多条折线(或其他类型的图表)，点击某个图例是想只看该图例对应的数据；
    //于是修改了图例点击事件。
    //
    //实现的效果是(以折线图为例)：
    //1. 当某条折线隐藏时，点击该折线的图例 --> 该折线显示；
    //2. 当全部折线都显示时，点击某个图例 --> 该图例对应的折线显示，其他折线均隐藏；
    //3. 当只有一条折线显示时，点击该折线的图例 --> 全部折线均显示；
    //4. 其他情况，按默认处理：
    //显示 --> 隐藏；
    //隐藏 --> 显示；
    //Customized legendItemClick Event online: http://code.hcharts.cn/rencht/hhhhLv/share
    private func customLegendItemClickEvent() -> AAOptions  {
        let aaChartModel = AAChartModel()
            .chartType(.column)
            .stacking(.normal)
            .colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])//设置主题颜色数组
            .markerRadius(0)
            .series([
                AASeriesElement()
                    .name("2017")
                    .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]),
                AASeriesElement()
                    .name("2018")
                    .data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]),
                AASeriesElement()
                    .name("2019")
                    .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]),
                AASeriesElement()
                    .name("2020")
                    .data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]),
            ])
        let aaOptions = aaChartModel.aa_toAAOptions()
        
        aaOptions.legend?
            .enabled(true)
            .align(.right)//设置图例位于水平方向上的右侧
            .layout(.vertical)//设置图例排列方式为垂直排布
            .verticalAlign(.top)//设置图例位于竖直方向上的顶部
        
        
        //自定义图例点击事件
        aaOptions.plotOptions?.series?.events = AAEvents()
            .legendItemClick(#"""
            function(event) {
                function getVisibleMode(series, serieName) {
                    var allVisible = true;
                    var allHidden = true;
                    for (var i = 0; i < series.length; i++) {
                        if (series[i].name == serieName)
                            continue;
                        allVisible &= series[i].visible;
                        allHidden &= (!series[i].visible);
                    }
                    if (allVisible && !allHidden)
                        return 'all-visible';
                    if (allHidden && !allVisible)
                        return 'all-hidden';
                    return 'other-cases';
                }
                
                var series = this.chart.series;
                var mode = getVisibleMode(series, this.name);
                var enableDefault = false;
                if (!this.visible) {
                    enableDefault = true;
                }
                else if (mode == 'all-visible') {
                    var seriesLength = series.length;
                    for (var i = 0; i < seriesLength; i++) {
                        var serie = series[i];
                        serie.hide();
                    }
                    this.show();
                }
                else if (mode == 'all-hidden') {
                    var seriesLength = series.length;
                    for (var i = 0; i < seriesLength; i++) {
                        var serie = series[i];
                        serie.show();
                    }
                }
                else {
                    enableDefault = true;
                }
                return enableDefault;
            }
        """#)
        
        return aaOptions
    }

代码运行成功后的在线示例:

• http://code.hcharts.cn/rencht/hhhhLv/share

当然, 你也可以在 AAChartKit-Swift 的 demo 中运行查看自定义 legend 的点击事件的效果.

[AAChartModel]

但是如果你想获取 legend 点击事件回调信息, 并且将回调信息传给原生的 Swift, 代码写起来还挺啰嗦的.

由于 legend 本身的绘制没有多少复杂度, 你完全可以隐藏图表自身的 legend 的, 然后使用 UIView 自定义一个原生的 legend, 然后自行处理相关的点击事件.