GUI отсутствует в моей высокоуровневой угловой версии демо stock-tools-gui

Question

Я пытаюсь сделать англоязычную версию хорошего демо: https://www.highcharts.com/stock/demo/stock-tools-gui.

В своей попытке я использую официальную угловую оболочку highcharts: https://codesandbox.io/s/pjkqwwmkr7 - она ​​работает, за исключением того, что элементы графического интерфейса не отображаются. Что я упустил? Любая подсказка высоко ценится.

Answer 1

GUI - это Highcharts module , поэтому не забудьте импортировать все модули и инициализировать их следующим образом:

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

Также обратите внимание, что для графического интерфейса требуются CSS-файлы (gui.css, popup.css - я скопировал содержимое файлов в styles.css в демонстрационной программе codesandbox, но лучше импортировать их).

Демо:
https://codesandbox.io/s/w6ojm7rz0l

Answer 2

Вы используете Highcharts 6.1.0, в котором еще не было стандартных инструментов. Этот модуль был создан для версии 7.x - Журнал изменений

Обновите версию в codeSandbox и она должна работать.

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

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