Я строю следующий график
https://jsfiddle.net/marialaustsen/x1s9ndm3/11/
Я пытаюсь создать функцию щелчка для кнопки Все, но вместо того, чтобы скрыть другие серии и показать только одну серию ie, я хотел бы показать все серии на графике при нажатии кнопки all . Наиболее масштабный способ сделать это - просто перерисовать диаграмму, но я не могу понять, как ... Это должно быть очень просто ...
Я пытался использовать метод перерисовки в событии щелчка
$('#all').click(function () {
chart.redraw();
});
Весь код здесь:
`````
<div id="container1"></div>
<button id="All">All</button>
<button id="2017">2017</button>
<button id="2018">2018</button>
<button id="2019">2019</button>
$(function() {
// Apply the grey theme
Highcharts.setOptions( {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '
#55BF3B', '#DF5353', '#7798BF', '#aaeeee'], chart: {
backgroundColor: {
linearGradient: {
x1: 0, y1: 0, x2: 1, y2: 1
}
, stops: [ [0, '#f5f5f5'], [1, '#F0F0F0']]
}
, style: {
fontFamily: 'Montserrat'
}
, plotBorderColor: '#000066'
}
, title: {
style: {
color: '#00BFB3', textTransform: 'uppercase', fontSize: '20px'
}
}
, subtitle: {
style: {
color: '#007396', textTransform: 'uppercase'
}
}
, xAxis: {
gridLineColor: '#B5B5B9', labels: {
style: {
color: '#007396'
}
}
, lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', title: {
style: {
color: '#007396'
}
}
}
, yAxis: {
gridLineColor: '#B5B5B9', labels: {
style: {
color: '#00BFB3'
}
}
, lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', tickWidth: 1, title: {
style: {
color: '#007396'
}
}
}
, tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)', style: {
color: '#F0F0F0'
}
}
, plotOptions: {
series: {
dataLabels: {
color: '#007396', style: {
fontSize: '13px'
}
}
, marker: {
lineColor: '#333'
}
}
, boxplot: {
fillColor: '#505053'
}
, candlestick: {
lineColor: 'white'
}
, errorbar: {
color: 'white'
}
}
, legend: {
backgroundColor: 'rgba(62,62,62,1)', itemStyle: {
color: '#E0E0E3'
}
, itemHoverStyle: {
color: '#FFF'
}
, itemHiddenStyle: {
color: '#606063'
}
, title: {
style: {
color: '#C0C0C0'
}
}
}
, credits: {
style: {
color: '#666'
}
}
, labels: {
style: {
color: '#707073'
}
}
, drilldown: {
activeAxisLabelStyle: {
color: '#007396'
}
, activeDataLabelStyle: {
color: '#007396'
}
}
, navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD', theme: {
fill: '#505053'
}
}
}
, // scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053', stroke: '#000000', style: {
color: '#CCC'
}
, states: {
hover: {
fill: '#707073', stroke: '#000000', style: {
color: 'white'
}
}
, select: {
fill: '#000003', stroke: '#000000', style: {
color: 'white'
}
}
}
}
, inputBoxBorderColor: '#505053', inputStyle: {
backgroundColor: '#333', color: 'silver'
}
, labelStyle: {
color: 'silver'
}
}
, navigator: {
handles: {
backgroundColor: '#666', borderColor: '#AAA'
}
, outlineColor: '#CCC', maskFill: 'rgba(255,255,255,0.1)', series: {
color: '#7798BF', lineColor: '#A6C7ED'
}
, xAxis: {
gridLineColor: '#505053'
}
}
, scrollbar: {
barBackgroundColor: '#808083', barBorderColor: '#808083', buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063', buttonBorderColor: '#606063', rifleColor: '#FFF',
trackBackgroundColor: '#404043', trackBorderColor: '#404043'
}
});
// Create the chart
Highcharts.chart('container1', {
chart: {
type: 'column'
},
title: {
text: 'Feedback per quarter grouped by year'
},
subtitle: {
text: 'Source: '
},
xAxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} feedback</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2017',
data: [55, 72, 108, 130]
}, {
name: '2018',
data: [80, 65, 100, 40]
}, {
name: '2019',
data: [45, 34, 67, 24]
}]
}, function(chart) {
// the button action
$('#all').click(function () {
chart.redraw()
})
$('#2017').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2017') ? p.show() : p.hide()
})
})
$('#2018').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2018') ? p.show() : p.hide()
})
})
$('#2019').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2019') ? p.show() : p.hide()
})
})
});
});
Как перерисовать или перезагрузить график, нажав на кнопку Все?