Highchart Stock gui 在 Angular 8 中不起作用

Question

我正在尝试用 Angular 8 中的 Highchart 股票制作图表。我想添加“全屏”按钮，所以我做了以下操作：

在我的组件中，我导入了所需的模块：

import * as Highcharts from "highcharts/highstock";
import * as HStockTools from "highcharts/modules/stock-tools";
import * as HFulScreen from "highcharts/modules/full-screen";


HFulScreen(Highcharts)
HStockTools(Highcharts)

在我的 CSS 文件中，我添加了：

@import "https://code.highcharts.com/css/stocktools/gui.css";
@import "https://code.highcharts.com/css/annotations/popup.css";

图表选项：

stockTools: {
    gui: {
      buttons: [ 'fullScreen', 'separator', 'saveChart' ]
    }
  },
  chart: {
      height : "600px"
  },
  tooltip: {
    shared: true ,
    split :false
  },
  credits: {
    enabled: false
  },
  yAxis: [{
    labels: {
      align: 'left'
    },
    height: '60%',
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'left'
    },
    top: '60%',
    height: '20%',
    offset: 0
  }, {
    top: '80%',
    height: '20%'
  }],

  series: [{
    type: 'line',
    id: 'activa-ohlc',
    name: 'AAPL Stock Price',
    data: "ohlc"
  }, {
    type: 'column',
    id: 'aapl-volume',
    name: 'AAPL Volume',
    data: "volume"
  }],

Package.json 使用 Highchart 的版本：

"highcharts": "^8.0.3",
"highcharts-angular": "^2.4.0",

但是我收到了这个错误：

ERROR in ../node_modules/highcharts/modules/full-screen.d.ts:17:21 - error TS2304: Cannot find name 
'Fullscreen'.

17         fullscreen: Fullscreen;

不知道是不是我做错了

感谢您的帮助

Answer 1

我在 highcharts-angular 存储库中发现了一个类似的问题。

https://github.com/highcharts/highcharts-angular/issues/259#issuecomment-762787358

看起来 Fullscreen 模块需要 Exporting 模块，因此要解决此问题，您可以尝试导入并初始化 Exporting 模块。

import HC_exporting from 'highcharts/modules/exporting';
import HC_FullScreen from 'highcharts/modules/full-screen';

HC_exporting(Highcharts);
HC_FullScreen(Highcharts);

希望能解决您的问题。如果以下解决方案没有帮助，请在在线编辑器中重现该问题，以便我检查哪些问题不起作用或可以解决哪些问题。

Highchart Stock gui 在 Angular 8 中不起作用

Highchart Stock gui does not work in Angular 8

highcharts

angular