GithubHelp home page GithubHelp logo

Comments (5)

AAChartModel avatar AAChartModel commented on June 12, 2024

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

from aachartkit-swift.

szweee avatar szweee commented on June 12, 2024

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

from aachartkit-swift.

AAChartModel avatar AAChartModel commented on June 12, 2024

:

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,你需要相应地调整代码。

from aachartkit-swift.

AAChartModel avatar AAChartModel commented on June 12, 2024

回到 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
    }

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

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

from aachartkit-swift.

AAChartModel avatar AAChartModel commented on June 12, 2024

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

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

from aachartkit-swift.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.