即使自定义图例单击以使其不可见，如何在折线图中至少显示一行

Posted 2021-05-05

我创建了一个折线图，里面有4条线.4条线有不同的颜色。当点击相应的彩色斑点（在自定义图例中）时，相应的彩色线条将消失。如果再次单击该线条将可见。如果我通过在所有彩色斑点中单击一次使所有线条不可见，则整个图表将消失。现在我想要至少有一条线可见，即使点击了图例。也就是说，如果线条图中只剩下一条线，则单击图例时不允许它消失在我的情况下，图例不是默认的高图。它是自定义的.Iam在这里附上代码

Highcharts.chart('myChart', {
  chart:{
    backgroundColor: 'transparent',
    //polar: true,
    height: 600,
    type: 'line',
    //marginTop: 27 ,
    margin: [60, 10, 60, 10],
    events: {
      load: function() {

        // legend box
        var div = document.createElement('div');
        div.setAttribute('class', 'legend-box');
        document.getElementsByClassName('chart-indicator-ano')[0].appendChild(div);

        // items
        var ul = document.createElement('ul');
        ul.setAttribute('class', 'item-list');
        div.appendChild(ul);
        
        this.series.forEach(function(s,i) { 
          var li = document.createElement('li'); 
          li.setAttribute('class', 'menu-item-' + (i + 1));
          li.style.opacity = 1;
          li.style.color = s.color;
          
          ul.appendChild(li);
          var sp = document.createElement('span'); 
          sp.setAttribute('class', 'hover-item-' + (i + 1));
          li.appendChild(sp);
            li.addEventListener('click', function() {
              this.setAttribute('data-open',"0");
             s.setVisible();
            
          });
        });

      }
    }
  },
  
  
  
  
  ...................
  ...................
  ...................
  }
  }

答案

当只剩下一个可见系列时，此代码将禁用系列隐藏：

// on custom legend item click
        var visibleSeries = 0,
          hidingEnabled = true;
        if (s.visible) {
          chart.series.forEach(function(s) {
            if (s.visible) {
              visibleSeries++;
            }
          });

          if (visibleSeries === 1) {
            hidingEnabled = false;
          }
        }

        if (hidingEnabled) {
          s.setVisible();
        }