vue使用highcharts自定義圖例點擊事件
本文實例為大家分享了vue使用highcharts自定義圖例點擊事件的具體代碼,供大家參考,具體內(nèi)容如下
highcharts圖表自帶的圖例點擊事件是:點擊某個顯示/隱藏的圖例,該圖例對應(yīng)的series就隱藏/顯示。
需求方這邊的需求是:
1、默認(rèn)全部展示所有分類
2、點擊某一個分類,則隱藏其他分類
3、如果再次點擊這個分類,則全部顯示
4、如果點擊了A,再點擊了B,則顯示A和B
于是乎只能自定義圖例點擊事件。
// 數(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 ? ? ? ? // &= 按位運算用法: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指向,以便圖例點擊事件中調(diào)用方法 ? ? Hightcharts.chart(id, { ? ? ? ? ..., ? ? ? ? // hightcharts對應(yīng)的配置項 ? ? ? ? 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環(huán)境下運行,需要注意圖例點擊事件方法中this指向問題。
預(yù)覽效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)
這篇文章主要介紹了Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05vue-cli創(chuàng)建項目及項目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli,接下來我們就使用該腳手架進行創(chuàng)建項目,這篇文章主要介紹了vue-cli創(chuàng)建項目以及項目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05