代码之家 › 专栏 › 技术社区 › Peterhack

如何在react typescript中加载highcharts注解模块?

highcharts typescript reactjs

1

Peterhack · 技术社区 · 7 年前

我在努力繁殖 this 在react中使用注释的highcharts与typescript进行交互。就像你在现场看到的那样 demo 注释没有被显示,我认为这是由于一些加载问题造成的。

import * as React from "react";
import * as Highcharts from "highcharts";
import * as Annotations from "highcharts/modules/annotations";

1 回复 | 直到 7 年前

1

2

Matt McCutchen 7 年前

看来打字的人不知道 highcharts/modules/annotations 模块。首先,创建一个单独的文件 declarations.d.ts

declare module "highcharts/modules/annotations";

import * as Highcharts from "highcharts";
import AnnotationsFactory = require("highcharts/modules/annotations");
AnnotationsFactory(Highcharts);

并添加 as any 将大配置对象传递给 Highcharts.chart annotations 财产(您所做的操作在运行时似乎是有效的,但过时的打字无法识别。)

最后,在 tsconfig.json ,更改 module esnext 到 commonjs 能够使用导入分配。

Final CodeSandbox .

在本地,我遇到了一些依赖性问题,不得不禁用tslint quotemark规则,因为它阻止了构建,但我最终还是让注释正常工作了。如果你需要那部分的帮助,请告诉我。

2

1

Harut Margaryan 5 年前

link

import Highcharts from 'highcharts'
import AnnotationsFactory from "highcharts/modules/annotations";
import HighchartsReact from 'highcharts-react-official'

// init the module
AnnotationsFactory(Highcharts);

导入后应使用

这样就可以使用任何模块。