GUI在我的股票工具GUI演示的高图表角度版本中丢失

Question

我正在尝试制作一个漂亮的演示的 Angular 版本：https://www.highcharts.com/stock/demo/stock-tools-gui .

我在这里尝试使用官方的 highcharts-angular 包装器：https://codesandbox.io/s/pjkqwwmkr7 - 它有效，但 GUI 元素未显示。我错过了什么？任何提示都受到高度赞赏。

Answer 1

GUI 是 Highcharts 模块，所以请记住导入所有模块并像这样初始化它们：

import * as Highcharts from "highcharts/highstock";
import * as HIndicatorsAll from "highcharts/indicators/indicators-all";
import * as HDragPanes from "highcharts/modules/drag-panes";
import * as HAnnotationsAdvanced from "highcharts/modules/annotations-advanced";
import * as HPriceIndicator from "highcharts/modules/price-indicator";
import * as HFullScreen from "highcharts/modules/full-screen";
import * as HStockTools from "highcharts/modules/stock-tools";
HIndicatorsAll(Highcharts);
HDragPanes(Highcharts);
HAnnotationsAdvanced(Highcharts);
HPriceIndicator(Highcharts);
HFullScreen(Highcharts);
HStockTools(Highcharts);

有关在highcharts-angular中加载模块的更多信息：
https://github.com/highcharts/highcharts-angular#to-load-a-module

另外，请注意，GUI 需要 CSS 文件（gui.css，弹出窗口.css - 我在代码沙箱演示中将文件内容复制到样式.css但最好导入它们）。

演示：
https://codesandbox.io/s/w6ojm7rz0l

Answer 2

您使用的是 Highcharts 6.1.0，它还没有库存工具。此模块是为 7.x 版本创建的 - 更改日志

更新代码沙盒中的版本，它应该可以工作。

https://code.highcharts.com/modules/stock-tools.js // version 7.x

https://code.highcharts.com/6.1.0/modules/stock-tools.js // error