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

lvmkulzt 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(192)

在范围选择器中，我有许多选项可供选择（实际上），在给定的演示中，我最初加载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

highcharts

来源：https://stackoverflow.com/questions/72540190/enable-all-range-selectors-options-in-stock-highcharts

1条答案

按热度按时间

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

赞(0）回复(0）举报 2022-11-10

我来回答

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

1条答案

相关问题

热门标签

最新问答