时间戳

首页 > 解决方案 > 如何在角度 6 的 highcharts 中使用 highstocks 渲染图表？

typescript - 如何在角度 6 的 highcharts 中使用 highstocks 渲染图表？

问题描述

我想使用 angular 6 中的 highcharts 来实现 highstock。

我已经成功地使用 div 标签和 id 作为容器来渲染它，就像 hoghcharts-official forum 的例子一样。但我不想那样做。

我想使用它来渲染它

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

这里 highcharts 是 -> import * as HighCharts from 'highcharts'，constructorType 是 -> 'stockChart' 和 chartOptions -> 我给出的 chartoptions 与给出的链接相同

这里

我试过但我收到如下错误：

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)

谁能帮帮我吗 ！

标签： typescriptchartshighchartsangular6

解决方案

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

import * as HighCharts

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

此外，检查您是否导入并初始化了所有必需的模块，发生的错误通常意味着用户正在尝试使用需要额外模块的系列/功能。例子：

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

推荐阅读