highcahrt动态删减series数据列 及 图例点击事件

本文介绍了如何使用Highcharts动态添加和移除series数据列,并重点讲解了如何设置图例点击事件,当图表显示数据超过5条时,阻止用户进一步隐藏数据,提示用户需先隐藏一条数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//chart_amount为定义highchart时的位置(或id名)

//调用addSeries()方法,设置并加载series数据列    

chart_amount.addSeries({

     name: obj.manufacturer,
             data: obj.rateList,
             pointPlacement: 'on'

         });

//调用remove()方法,删除series数据列

chart_amount.series[0].remove();


  plotOptions: {
            series: {
      cursor: 'pointer',
      events: {

//图例点击事件
      legendItemClick: function(e) {
                var index = this.index;
                var series = this.chart.series;
                if(series[index].visible)  return true;
                var sum = 0;
                for(var len=series.length,i=0; i<len-1; i++){
                if(series[i].visible) ++sum;
                }
                if(sum>=5){
                alert("图表最多显示5条数据,请先点击图例,隐藏一条数据");
                return false;
                }
                return true;
            }
      }
            }
         },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值