vue使用highcharts自定义图例点击事件
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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指向问题。
预览效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341