这篇文章将为大家详细讲解有关vue如何使用hightcharts自定义图例点击事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下
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如何使用hightcharts自定义图例点击事件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。