Button Highcharts在图表中重新绘制系列
我正在建立下面的图表 我正在尝试为“全部”按钮创建一个单击功能,但我不想隐藏其他系列并仅显示一个系列,而是希望在单击“全部”按钮时显示图表中的所有系列。最具可伸缩性的方法是简单地重新绘制图表,但我不知道如何。。 这应该非常简单 我尝试在单击事件中使用重画方法Button Highcharts在图表中重新绘制系列,button,charts,highcharts,click,redraw,Button,Charts,Highcharts,Click,Redraw,我正在建立下面的图表 我正在尝试为“全部”按钮创建一个单击功能,但我不想隐藏其他系列并仅显示一个系列,而是希望在单击“全部”按钮时显示图表中的所有系列。最具可伸缩性的方法是简单地重新绘制图表,但我不知道如何。。 这应该非常简单 我尝试在单击事件中使用重画方法 $('#all').click(function () { chart.redraw(); }); 此处的所有代码: ````` <div id="container1"></div> <button id
$('#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()
})
})
});
});
单击“全部”按钮后,如何重新绘制或重新加载图表?您需要显示系列并重新绘制图表。最有效的方法是在redraw参数设置为false的每个序列上使用setVisible方法,并在循环外调用chart.redraw
$('#All').click(function() {
Highcharts.each(chart.series, function(s, i) {
s.setVisible(true, false);
});
chart.redraw();
});
现场演示:
API参考:
非常感谢你!你的解决方案是有意义的,而且有效。