highcharts 在股票高值图中启用所有范围选择器的选项

lvmkulzt  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(191)

在范围选择器中,我有许多选项可供选择(实际上),在给定的演示中,我最初加载last 2 hours数据。
在此方案中,启用last 1 hour选项,但禁用其他选项
我真的不知道什么是错的。要求是先加载last 2 hour数据,然后从下拉菜单中,你可以选择其他选项(例如,最后6小时),相应的数据将被加载。

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

我试过设置

minRange:1

但我不知道怎么修。

演示https://stackblitz.com/edit/js-2eyktg?file=index.js,chartOptions.js,mock-data%2Fi.js
更新内容:

我试过用

allButtonsEnabled: true,

它启用了所有选项,但当我单击3 hours, 6 hours选项时,它没有进行任何BE调用。我认为它应该自动调用afterSetExtremes函数(带有min&max值),从BE中获取数据并更新图表**,但它没有发生**。

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

imzjd6km

imzjd6km1#

您可以:
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/highstock/navigator.xAxis

B)启用rangeSelector.allButtonsEnabled属性并使用afterBtnClick Highcharts事件。如果极值与当前极值相同,则不调用事件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

相关问题