Javascript 使用网页包加载AmCharts+;打字稿

Javascript 使用网页包加载AmCharts+;打字稿,javascript,charts,typescript,webpack,amcharts,Javascript,Charts,Typescript,Webpack,Amcharts,我遇到了一些严重的问题,让任何图表库使用webpack+typescript。我现在正在使用AmCharts,并且已经在定义文件上做了一些工作,以使typescript编译器能够识别模块语法 我的网页包配置设置如下: "resolve": { extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'], "alias": { "config": path.join(__dirname,

我遇到了一些严重的问题,让任何图表库使用webpack+typescript。我现在正在使用AmCharts,并且已经在定义文件上做了一些工作,以使typescript编译器能够识别模块语法

我的网页包配置设置如下:

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },
在打字稿中:
从“AmCharts”导入AmCharts

现在,所有这些都按预期编译,但当我执行
console.log(AmCharts)
我剩下一个空对象

是否有人有过让AmCharts+webpack玩得很好的经验,或者有一个符合以下标准的像样的替代图表库:

  • 体面的类型脚本定义支持
  • 可通过JSON配置
  • 与ES6/Webpack/CommonJS配合得很好

  • 提前谢谢

    我遇到了同样的问题
    从'amcharts3'导入AmCharts

    打印到控制台时,我得到一个空对象,错误如下:

    Uncaught TypeError:_amcharts2.default.makeChart不是函数

    ASNWER:

    通过使用窗口变量so
    window.amcharts.makeChart('chartdiv',options)


    希望您可以使用相同的方法。

    我们使用webpack+动态导入+amChart配置

    将图表依赖项复制到生成文件夹 动态导入amChart 我保证([

    amChart配置
    我最终得到了amcharts支持团队的响应。诀窍是在网页包配置中执行
    外部:{“amcharts”:“var amcharts”},
    ,然后实际将其放入index.html中的scripts标记中。然后在必要时可以执行
    导入“amcharts”
    而且它会起作用。他们说下一版本的amcharts(v4?)将支持ES6,但它离ES6还有很长的路要走。遗憾的是,它是最好的图表库之一。导入库kudosWorks的更干净的方法是使用
    @amcharts/amcharts4
        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 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')
    
    
        ])
    
    path: '/js'