Heightcharts自定义图例点击事件

代码溯影客
• 阅读 1149

摘要:heightcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示。产品的需求点击某个图例是想只看该图例对应的数据;于是修改了图例点击事件。实现效果链接

//展示/隐藏的逻辑函数
function getVisibleMode(series, serieName) {
    var allVisible = true;
    var allHidden = true;
    for (let 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';
};
//heightcharts 对应的配置项
plotOptions : {
            series: {
                events : {
                    legendItemClick : function(event) {
                        var series = this.chart.series;
                        var mode = 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;
                    }
                }
            }
        },
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue 点击展开显示更多 点击收起部分隐藏
!(https://oscimg.oschina.net/oscnet/d0140463d211428dbcf6d2b7d8585e3ced5.png)1<!DOCTYPEhtml2<htmllang"en"3<head4<metacharset"UTF8"
皕杰报表之柱状图
1.当我们想设置柱状图时,可以在皕杰报表内,鼠标右键设置类型选择图表类型,鼠标双击图表,选择柱状图和图标模式普通柱状图。可以设置为水平方向。2.选择数据设定,在‘分类轴’和‘系列’中分别设定其值或者表达式。3.选择显示格式,一般图表包括图表区,标题与图例,X轴,Y轴和警戒线。图表颜色:设置图表数据区以外的背景色和字体颜色。数据区颜色:设置数据区内的背景颜色和
Wesley13 Wesley13
3年前
SSH整合步骤详解(图例)
!SSH整合步骤详解(图例)(http://static.oschina.net/uploads/img/201505/31142736_Nel7.jpg"SSH整合步骤详解(图例)")(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fphoto.blog.sina.com.cn%2
Stella981 Stella981
3年前
QTreeWidget的Item点击事件
转载:cw123458945(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fcw123458945%2Farticle%2Fdetails%2F8160295)1!/usr/bin/envpython23i
Wesley13 Wesley13
3年前
MySQL基础之Natural Join用法
Naturaljoin即自然连接,naturaljoin等同于innerjoin或innerusing,其作用是将两个表中具有相同名称的列进行匹配用https://www.w3resource.com的图例:(https://www.w3resource.com的图例:)!在这里插入图片描述(https://oscimg.oschina
Stella981 Stella981
3年前
Android点击事件
Android点击事件备注全局实现View.OnClickListener或许需要将MainActivity设置为public注册事件btn_login.setOnClickListener(this)btn_logout.setOnClickListen
Stella981 Stella981
3年前
SpringBoot2.0高级案例(08):整合 Dubbo框架 ,实现RPC服务远程调用
一、Dubbo框架简介1、框架依赖!(https://img2018.cnblogs.com/blog/1691717/201907/169171720190707215719256877474817.png)图例说明:1)图中小方块Protocol,Cluster,Proxy,Servi
Easter79 Easter79
3年前
SpringBoot2.0高级案例(08):整合 Dubbo框架 ,实现RPC服务远程调用
一、Dubbo框架简介1、框架依赖!(https://img2018.cnblogs.com/blog/1691717/201907/169171720190707215719256877474817.png)图例说明:1)图中小方块Protocol,Cluster,Proxy,Servi
Wesley13 Wesley13
3年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
Stella981 Stella981
3年前
ECharts常用图例
最近做了一个统计报表的功能,画了一周的原型图,一直找,找到了很多插件图,最后选择用下面几个图:1.柱形图:!(https://oscimg.oschina.net/oscnet/5ca7dd2bfad9cd0464a31ad6353d8a37895.png)varjdData'DSCY处','RJHXXFW处','SCXFW
陈杨 陈杨
2个月前
鸿蒙5莓创折线与柱状图legend属性详解
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解组合图组件McLineBarChart中legend属性的详细用法。1.show属性作用:控制是否显示图例类型:Boolean默认值:true可选值:true|false场景:当需要隐藏图例时设置为
代码溯影客
代码溯影客
Lv1
东风吹落战尘沙,梦想西湖处士家;
文章
5
粉丝
0
获赞
0