我创建了一个折线图,里面有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();
}