Я использую HighStocks и реализовал две кнопки, чтобы иметь два представления данных моего графика;«Все» и «последние 30 дней».Я также определил состояния кнопок, но кнопка «последние 30 дней» не меняет своего внешнего вида после нажатия, даже если кнопка «Все» делает это.Кроме того, свойство «selected» диаграммы также обновляется, и даже состояние кнопки изменяется через некоторые обходные пути.Тем не менее, его внешний вид остается прежним.
Слушай, мой объект опций:
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',
}]
});
Почему одна из моих кнопок не меняет свой внешний вид при нажатии?
Спасибо!