vue使用highcharts自定義圖例點(diǎn)擊事件
本文實(shí)例為大家分享了vue使用highcharts自定義圖例點(diǎn)擊事件的具體代碼,供大家參考,具體內(nèi)容如下
highcharts圖表自帶的圖例點(diǎn)擊事件是:點(diǎn)擊某個(gè)顯示/隱藏的圖例,該圖例對(duì)應(yīng)的series就隱藏/顯示。
需求方這邊的需求是:
1、默認(rèn)全部展示所有分類
2、點(diǎn)擊某一個(gè)分類,則隱藏其他分類
3、如果再次點(diǎn)擊這個(gè)分類,則全部顯示
4、如果點(diǎn)擊了A,再點(diǎn)擊了B,則顯示A和B
于是乎只能自定義圖例點(diǎn)擊事件。
// 數(shù)據(jù)列展示/隱藏的邏輯函數(shù)
getVisibleMode(series, serieName) {
? ? var allVisible = true
? ? var allHidden = true
? ? for (let i = 0; i < series.length; i++) {
? ? ? ? if (series[i].name === serieName)
? ? ? ? ? ? continue
? ? ? ? // &= 按位運(yùn)算用法:a &= b 等價(jià)于 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指向,以便圖例點(diǎn)擊事件中調(diào)用方法
? ? Hightcharts.chart(id, {
? ? ? ? ...,
? ? ? ? // hightcharts對(duì)應(yīng)的配置項(xiàng)
? ? ? ? plotOptions : {
? ? ? ? ? ? series: {
? ? ? ? ? ? ? ? events : {
? ? ? ? ? ? ? ? ? ? // 圖例點(diǎn)擊事件
? ? ? ? ? ? ? ? ? ? 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環(huán)境下運(yùn)行,需要注意圖例點(diǎn)擊事件方法中this指向問題。
預(yù)覽效果圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue計(jì)算屬性與監(jiān)視屬性詳細(xì)分析使用
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-11-11
vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能,本文通過提問兩個(gè)問題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過程,需要的朋友可以參考下2018-06-06
Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析
Vue-cli@3.0 是一個(gè)全新的 Vue 項(xiàng)目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析,需要的朋友可以參考下2018-09-09
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
這篇文章主要為大家詳細(xì)介紹了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開源庫,它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下2024-04-04

