vue使用highcharts自定义图例点击事件

 更新时间:2022年03月28日 14:27:21   作者:lvan找不到bug  
这篇文章主要为大家详细介绍了vue使用highcharts自定义图例点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue使用highcharts自定义图例点击事件的具体代码,供大家参考,具体内容如下

highcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示。

需求方这边的需求是:

1、默认全部展示所有分类
2、点击某一个分类,则隐藏其他分类
3、如果再次点击这个分类,则全部显示
4、如果点击了A,再点击了B,则显示A和B

于是乎只能自定义图例点击事件。

// 数据列展示/隐藏的逻辑函数
getVisibleMode(series, serieName) {
    var allVisible = true
    var allHidden = true
    for (let i = 0; i < series.length; i++) {
        if (series[i].name === serieName)
            continue
        // &= 按位运算用法:a &= b 等价于 a = a & b (值为 0 / 1)
        allVisible &= series[i].visible
        allHidden &= (!series[i].visible)
    }
    if (allVisible && !allHidden)
        return 'all-visible'
    if (allHidden && !allVisible)
        return 'all-hidden'
    return 'other-cases'
},
// 绘制图表的方法
drawChart(id) {
    let that = this // 记录this指向,以便图例点击事件中调用方法
    Hightcharts.chart(id, {
        ...,
        // hightcharts对应的配置项
        plotOptions : {
            series: {
                events : {
                    // 图例点击事件
                    legendItemClick : function (e) {
                        var series = this.chart.series
                        var mode = that.getVisibleMode(series, this.name)
                        var enableDefault = false
                        if (!this.visible) {
                            enableDefault = true
                        } else if (mode === 'all-visible') {
                            series.forEach((serie, k) => {
                                serie.hide()
                            })
                            this.show()
                        } else if (mode === 'all-hidden') {
                            series.forEach((serie, k) => {
                                serie.show()
                            })
                        } else {
                            enableDefault = true
                        }
                        return enableDefault
                    }
                }
            }
        }
    })
}

代码在vue环境下运行,需要注意图例点击事件方法中this指向问题。

预览效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

    Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

    这篇文章主要介绍了Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue 标签属性数据绑定和拼接的实现方法

    vue 标签属性数据绑定和拼接的实现方法

    这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 最新Vue过滤器介绍及使用方法

    最新Vue过滤器介绍及使用方法

    过滤器是vue为开发者提供的功能,常用于文本的格式化,过滤器应该被添加在JavaScrip表达式的尾部,由“管道符”进行调用,这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法,需要的朋友参考下吧
    2022-11-11
  • vuex Module将 store 分割成模块的操作

    vuex Module将 store 分割成模块的操作

    这篇文章主要介绍了vuex Module将 store 分割成模块,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    这篇文章主要介绍了Vue项目中实现锚点定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue实现多条件筛选超简洁代码

    vue实现多条件筛选超简洁代码

    这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下
    2023-09-09
  • vue-cli创建项目及项目结构解析

    vue-cli创建项目及项目结构解析

    上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目,这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-10-10
  • 在vue中动态修改css其中一个属性值操作

    在vue中动态修改css其中一个属性值操作

    这篇文章主要介绍了在vue中动态修改css其中一个属性值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • Vue3之使用js实现动画示例解析

    Vue3之使用js实现动画示例解析

    这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue修改打包配置如何实现代码打包后的自定义命名

    vue修改打包配置如何实现代码打包后的自定义命名

    这篇文章主要介绍了vue修改打包配置如何实现代码打包后的自定义命名,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论