Shulou(Shulou.com)06/01 Report--

This article will explain in detail how vue uses hightcharts custom legend click events, the editor thinks it is very practical, so share it with you as a reference, I hope you can get something after reading this article.

The details are as follows

The legend click event that comes with the highcharts chart is: click on a show / hide legend, and the corresponding series of the legend will be hidden / shown.

The demand on the demand side is:

1. Show all categories by default

2. Click on one category and hide the other categories

3. If you click on this category again, all will be displayed.

4. If you click An and then B, then An and B are displayed.

So you can only customize the legend click event.

/ / logical function getVisibleMode (series, serieName) {var allVisible = true var allHidden = true for (let I = 0; I) shown / hidden in the data column

< 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}} })}

The code runs in the vue environment, so you need to pay attention to the problem of this pointing in the legend click event method.

Preview the effect picture:

On "vue how to use hightcharts custom legend click event" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.