在股票图表中启用所有范围选择器's选项

Question

在范围选择器中，我有许多选项可供选择(在现实中)，并且在给定的演示中，我最初加载last 2 hours数据。

在此场景中，last 1 hour选项被启用，但其他选项被禁用.

我真的不知道怎么了。要求是首先加载last 2 hour数据，然后从下拉菜单中，您可以选择其他选项(例如:最后6小时)，相应的数据将被加载。

如何启用范围选择器中的其他选项?

我试着设置

minRange:1 

但我不知道如何修复它。

: https://stackblitz.com/edit/js-2eyktg?file=index.js chartOptions.js,模拟数据% 2 fi.js

---

更新:

我试过使用

allButtonsEnabled: true,

它启用所有选项，但当我点击3 hours, 6 hours选项时，它不做任何BE调用。我认为它应该自动调用afterSetExtremesmin的函数,max值，从BE获取数据并更新图表，但它没有发生.

: https://stackblitz.com/edit/js-jsxchg?file=index.js, chartOptions.js backend.js

Answer 1

您可以:

a)设置导航器x轴的min属性:

navigator: {
xAxis: {
min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
}, 
// adaptToUpdatedData: false,
...
}

生活例子:https://stackblitz.com/edit/js-m38td3?file=index.js

API参考:https://api.highcharts.com/hilitock/navigator.xAxis

---

b)启用rangeSelector.allButtonsEnabled属性并使用afterBtnClickHighcharts事件。如果极值与当前极值相同(它们是由于初始的min和max限制)，则不会调用事件afterSetExtremes。

chart: {
zoomType: 'x',
events: {
load: function() {
Highcharts.addEvent(
this.rangeSelector,
'afterBtnClick',
function() {
const button = this.buttonOptions[this.selected];
const chart = this.chart;
afterSetExtremes({
target: {
chart
},
min: chart.xAxis[0].dataMax - button._range,
max: chart.xAxis[0].dataMax
});
});
}
}
}

现场演示:https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js index.js, index . html

文档:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts