Question

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

我在这里尝试使用官方的highcharts-angle包装器：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，popup.css-我在codeandbox演示中将文件内容复制到了styles.css中，但是导入它们是一个更好的主意）

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

Answer 2

您正在使用尚未使用库存工具的Highcharts 6.1.0。该模块是为7.x版本创建的-Change log

更新codeSandbox中的版本，它应该可以工作。

ApplicationRecord

bar

我的highcharts-角度版本的stock-tools-gui演示中缺少GUI

2 个答案: