在高图中，具有自定义事件的范围选择器按钮的状态不会正确更改

Question

我正在使用HighStocks，并实现了两个按钮，以便拥有两个图表数据视图；"全部"one_answers"最近30天"。我也定义了按钮的状态，但"最近30天"的按钮在单击后不会更改其外观，即使"全部"按钮也会更改。图表的"选定"属性也会更新，甚至按钮的状态也会通过一些变通方法更改。尽管如此，它的外观仍然不变。

听说是我的选择对象：

balanceChart = Highcharts.stockChart('balance-chart-section', {
chart: {
type: 'area',
style: {
fontFamily: 'ComicSans',
}
},
legend: {
enabled: true,
align: "right",
verticalAlign: "top",
rtl: false,
y: 0,
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
selected: 1,
buttons: [{
type: 'day',
count: 30,
text: 'Last 30 days',
events: {
click: function () {
this._offsetMax = 0;
this._offsetMin = Math.max(chartLength - 30, 0);
balanceChart.rangeSelector.selected = 0;
balanceChart.rangeSelector.buttons[0].setState(2);
balanceChart.rangeSelector.buttons[1].setState(0);
}
},
}, {
type: 'all',
text: 'All',
events: {
click: function () {
this._offsetMin = 0;
this._offsetMax = Math.max(chartLength - 1, 0);
balanceChart.rangeSelector.selected = 1;
balanceChart.rangeSelector.buttons[1].setState(2);
balanceChart.rangeSelector.buttons[0].setState(0);

}
}
}],
verticalAlign: 'bottom',
buttonPosition: {
align: 'center',
y: 12,
},
inputEnabled: false,
buttonSpacing: 30,
buttonTheme: {
style: {
fill: 'none',
color: '#595959',
},
stroke: 'none',
padding: 10,
fontWeight: 'bold',
height: 18,
width: null,
'stroke-width': 0,
r: 10,
states: {
hover: {
fill: '#0ec3ee',
style: {
color: 'white'
}
},
select: {
fill: '#16aed2',
style: {
color: 'white'
}
}
}
},
},
navigator: {
enabled: false,
},
scrollbar: {
enabled: false,
},
credits: {
enabled: false,
},
title: {
text: ''
},
subtitle: {},
xAxis: {
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
type: 'datetime',
lineColor: 'transparent',
tickLength: 0,
crosshair: {
width: 2,
color: 'gray',
dashStyle: 'shortDash'
},
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
tooltip: {
useHTML: true,
shared: true,
formatter: function () {
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup =
pointsLength ? '<div class="chart__tooltip" style="margin-bottom: 5px">' + points[0].key + '</div><br/>' : '';
var index;
var yValue;
for (index = 0; index < pointsLength; index += 1) {
yValue = (points[index].y);
tooltipMarkup += '<div class="chart__tooltip" style="margin-bottom: 5px">' +
points[index].series.name + ': <b>' + transform(number_formatter(yValue)) + '<b/>' + ' IRT' + '<br/></div>';
}
return tooltipMarkup;
},
borderWidth: 1,
backgroundColor: 'white',
borderColor: '#B5CAE1',
borderRadius: 10,
split: false,
},
plotOptions: {
series: {
lineWidth: 0
},
area: {}
},
series: [{
name: 'OriginalWithSurplus',
// data: seriesOne,
data: seriesOneTemp,
color: '#acdeaa',
}, {
name: 'Original',
// data: seriesTwo,
data: seriesTwoTemp,
color: '#bcc0ff',
}]
});

为什么我的一个按钮在单击时不会改变其外观？

谢谢！

Answer 1

如果正确设置了count和type按钮属性，则不需要使用带有自定义代码的click事件：

buttons: [{
type: 'day',
count: 30,
text: 'Last 30 days'
}, {
type: 'all',
text: 'All'
}]

现场演示：http://jsfiddle.net/BlackLabel/3Ld08eot/

API参考：https://api.highcharts.com/highstock/rangeSelector