简体   繁体   English

使用Webpack + Typescript加载AmCharts

[英]Loading AmCharts with Webpack + Typescript

I'm having some serious issues getting any charting library to work with webpack + typescript. 我有一些严重的问题让任何图表库与webpack + typescript一起使用。 I'm working with AmCharts right now and have already had to do work on the definitions file to get module syntax recognized by the typescript compiler. 我现在正在与AmCharts合作,并且已经不得不在定义文件上工作以获得typescript编译器识别的模块语法。

My webpack config is set up like this: 我的webpack配置设置如下:

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },

And in the typescript: import AmCharts from "amcharts"; 在打字稿中: import AmCharts from "amcharts";

Now, this all compiles as expected, but when i do a console.log(AmCharts) I am left with an empty object. 现在,这一切都按预期编译,但是当我执行console.log(AmCharts)我留下了一个空对象。

Does anyone have any experience with getting AmCharts + webpack to play nicely, or a decent alternative charting library that meets the following criteria: 有没有人有任何经验可以让AmCharts + webpack很好地发挥,或者是一个符合以下标准的体面的替代图表库:

  1. Decent Typescript definition support 体面的Typescript定义支持
  2. Configurable via JSON 可通过JSON配置
  3. Plays nicely with ES6/Webpack/CommonJS 与ES6 / Webpack / CommonJS很好地配合使用

Thanks in advance! 提前致谢!

I'm experiencing the same problem import AmCharts from 'amcharts3' 我遇到同样的问题import AmCharts from 'amcharts3'

I get an empty object when printing to the console, with the following error: 打印到控制台时出现空对象,出现以下错误:

Uncaught TypeError: _amcharts2.default.makeChart is not a function

ASNWER: ASNWER:

I was able to correct my issue by referencing amcharts using the window variable like so window.AmCharts.makeChart('chartdiv', options) 我能够通过使用窗口变量引用amcharts来解决我的问题,例如window.AmCharts.makeChart('chartdiv', options)

Hopefully you can use the same approach. 希望您可以使用相同的方法。

We use webpack + dynamic import + amChart config. 我们使用webpack +动态导入+ amChart配置。

Copy amChart dependencies to build folder 将amChart依赖项复制到构建文件夹

    new WebpackPluginCopy([
        // Coppy amChart export dependency libs
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs',
            ignore: ['!*.min.js'],
            to: 'js/plugins/export/libs'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/vfs_fonts.js',
            to: 'js/plugins/export/libs/pdfmake/vfs_fonts.js'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/shapes',
            to: 'js/plugins/export/shapes'
        }]),

module: {
    rules: [
        // Load amChart export style
        {
            test: /export.css/,
            use: ['style-loader', 'postcss-loader']
        }]}

Dynamically import amChart 动态导入amChart

Promise.all([ Promise.all([

        //Dynamically import amchart dependencies
        import('amcharts3/amcharts/plugins/export/export.css'),
        import('amcharts3/amcharts/amcharts'),
        import('amcharts3/amcharts/serial'),
        import('amcharts3/amcharts/themes/light'),
        import('amcharts3/amcharts/plugins/export/export.min')


    ])

amChart config amChart配置

path: '/js'

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM