如何在 angular 6 中使用 highcharts 中的 highstocks 渲染图表？

Question

我想在 angular 6.

中使用 highcharts 实现 highstock

我已经使用 div 标签和 id 作为容器成功渲染了它，就像在 hoghcharts-official 的示例中一样 forum.But 我不想那样做。

我想使用

渲染它

<highcharts-chart [Highcharts]="Highcharts" [constructorType]="chartConstructor"[options]="chartOptions">
</highcharts-chart>

这里的 highcharts 是 -> import * as HighCharts from 'highcharts'，constructorType 是 -> 'stockChart' 和 chartOptions -> 我给出的图表选项与 link 给出的

相同

here

我试过了但是我得到如下错误：

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
    at Object.a.error (highcharts.js:10)
    at a.Chart.initSeries (highcharts.js:250)
    at highcharts.js:275
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:29)
    at a.Chart.firstRender (highcharts.js:275)
    at a.Chart.<anonymous> (highcharts.js:250)
    at a.fireEvent (highcharts.js:31)
    at a.Chart.init (highcharts.js:249)
    at a.Chart.getArgs (highcharts.js:249)

然后无限循环继续出现以下错误

ERROR TypeError: Cannot read property 'text' of null
    at B.titleCollision (stock.js:127)
    at B.render (stock.js:124)
    at a.Chart.<anonymous> (stock.js:130)
    at a.Chart.a.<computed> [as render] (highcharts.js:20)
    at a.Chart.firstRender (highcharts.js:275)
    at a.Chart.<anonymous> (highcharts.js:250)
    at a.fireEvent (highcharts.js:31)
    at a.Chart.init (highcharts.js:249)
    at a.Chart.getArgs (highcharts.js:249)
    at new a.Chart (highcharts.js:248)

谁能帮帮我！

Answer 1

它可能不起作用，因为您将导入命名为 HighCharts 并将 Highcharts 传递给了 highcharts-chart 组件。要解决此问题，请更新您的导入名称。

import * as HighCharts

<highcharts-chart [Highcharts]="Highcharts" [constructorType]="chartConstructor"[options]="chartOptions">
</highcharts-chart>

此外，检查您是否导入并初始化了所有必需的模块，出现的错误通常意味着用户正在尝试使用需要额外模块的series/functionality。示例：

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

文档参考：
https://github.com/highcharts/highcharts-angular#to-load-a-module

请记住，您附加的示例是使用 angular-highcharts - 不受官方支持的第 3 方包装器构建的。

在这里您可以找到 highcharts-angular（官方包装）中内置的 Highcharts Stock 演示：https://stackblitz.com/edit/highcharts-angular-stock

如何在 angular 6 中使用 highcharts 中的 highstocks 渲染图表？

How to render a chart using highstocks in highcharts in angular 6?

charts

highcharts

typescript

angular6