highcharts 如何在异步加载数据时禁用Highstock范围选择器按钮?

6qftjkof  于 2022-11-11  发布在  Highcharts
关注(0)|答案(2)|浏览(188)

我正在创建一个类似于Highcharts lazy loading example的图表,每次用户通过鼠标拖动或与导航器交互进行放大时,我都会从后端服务中检索数据。单击范围选择器按钮也可以正常工作,但我遇到的问题是,在加载图表时,按钮没有被禁用-因为由于后端的特性,加载数据需要一段时间。这意味着用户可以按他们想要的次数点击其他按钮。
这会导致对后端的多次调用,最终会打乱图表的显示方式。例如,我可以单击“1 y”选项,然后单击“1d”。由于“1 y”视图的加载时间要长得多,因此图表将首先显示“1d”数据,然后切换到“1 y”数据。即使切换了,“1d”按钮仍将显示为最后选择的按钮。
除了Highcharts/Highstocks API文档之外,我还看了很多StackOverflow和GitHub上的帖子,但似乎没有任何答案。我尝试过这样修改“chartOptions”变量:

rangeSelector.enabled = false;

但这会导致每次都重新呈现整个图形,这也会重置我的导航器视图。我还尝试了useRef钩子,以查看是否已经发出请求,如果已经发出,则不创建新的请求,但是单击范围选择器按钮仍然会更改图表视图,即使它没有显式地向后端发送调用。我能想到的最后一个解决方案是创建一个div,用来在加载时基本上“屏蔽”范围选择器按钮,但这似乎是一个相当麻烦的修复方法。还有什么我应该尝试的吗?谢谢!

nlejzf6q

nlejzf6q1#

提取数据时,将加载变量设置为true,提取数据时,将加载设置为false。然后设置prop disabled={!loading}。

vwkv1x7d

vwkv1x7d2#

最简单的方法是通过CSS only rangeSelector组进行切换:

chart.rangeSelector.group.css({
    display: 'none'
  });

实时示例:https://jsfiddle.net/BlackLabel/g906s4k2/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#css

相关问题