高图表按钮一次隐藏/显示多个系列

Question

>我正在尝试向我的页面添加一个按钮，该按钮将一次隐藏/显示多个系列。我知道我可以使用图例在Highcharts中做到这一点，但在这里我尝试使用按钮来做到这一点。

这是我正在处理的代码的小提琴： https://jsfiddle.net/ssoj_tellig/o1ckqvg4/11/

非常感谢您的帮助！

var mydates = [1527465600000,1528070400000,1528675200000,1529280000000,1529884800000,1530489600000,1531094400000,1531699200000,1532304000000,1532908800000,1533513600000,1534118400000];
const chart = Highcharts.chart('container', {

chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
categories: mydates,
labels:{
formatter: function() { 
return Highcharts.dateFormat('%d %b %Y', 
this.value); 
},
align: 'right',
rotation: -90,
},
},
yAxis: {
min: 0,
max: 250,
tickInterval: 50,
title: {
text: 'Score'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
credits :  {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
series: [{
name: 'sample1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
name: 'sample2',
data: [45,88, 134.4, 178.2, 125.0, 76.0, 35.6, 48.5, 116.4, 94.1, 195.6, 154.4]},
{
name: 'sample3',
data: [10,38, 104.4, 78.2, 95.0, 56.0, 135.6, 148.5, 96.4, 194.1, 115.6, 114.4]
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
tooltip: {
valueDecimals: 1
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 1000
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
document.getElementById('#button').addEventListener('click', e => {
var series = chart.series[0];
var series1 = chart.series[1];
if (series.visible & series1.visible) {
series.hide();
series1.hide();
e.target.innerHTML = 'Show sample 1 & 2';
} else {
series.show();
series1.show();
e.target.innerHTML = 'Hide sample 1 & 2';
}
})

Answer 1

似乎你几乎明白了，但有一个小错误，定义：

document.getElementById('button')而不是document.getElementById('#button').

演示：https://jsfiddle.net/BlackLabel/Lgrsu2w6/

Answer 2

如果您修复按钮查询选择器，它似乎工作正常？document.getElementById('button')而不是document.getElementById('#button')

Answer 3

检查这个。我添加一个事件，如文档所述

Highcharts.addEvent(chart, 'load', someFunction);

选中在此处输入链接说明

我用querySelector更改Id。在下面的代码中，更改 highcharts-series-xx 的类名，其中 xx 是系列 (即 0 或 1 或 2)的数量。

var mydates = [1527465600000,1528070400000,1528675200000,1529280000000,1529884800000,1530489600000,1531094400000,1531699200000,1532304000000,1532908800000,1533513600000,1534118400000];
var elm=document.querySelector('button');

const chart_1 = Highcharts.chart('container', {

chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
categories: mydates,
labels:{
formatter: function() { 
return Highcharts.dateFormat('%d %b %Y', 
this.value); 
},
align: 'right',
rotation: -90,
},
},
yAxis: {
min: 0,
max: 250,
tickInterval: 50,
title: {
text: 'Score'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
credits :  {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
series: [{
name: 'sample1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
name: 'sample2',
data: [45,88, 134.4, 178.2, 125.0, 76.0, 35.6, 48.5, 116.4, 94.1, 195.6, 154.4]},
{
name: 'sample3',
data: [10,38, 104.4, 78.2, 95.0, 56.0, 135.6, 148.5, 96.4, 194.1, 115.6, 114.4]
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
tooltip: {
valueDecimals: 1
},
}
},

responsive: {
rules: [{
condition: {
maxWidth: 1000
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.addEvent(chart_1, 'load', 
elm.addEventListener('click', e => {
a=document.getElementsByClassName('highcharts-series-1');    
a[0]. remove();
a[1]. remove();
a[2]. remove();
}
));

<script src="https://code.highcharts.com/highcharts.js"></script>
<button id="button_1" style="width:100px;height:50px">Click to erase</button>
<div id="container" style="height: 500px">  

</div>

和 JS 小提琴网址示例