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

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

  •  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);
    

    导入后应使用

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

    推荐文章