[英]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很好地发挥,或者是一个符合以下标准的体面的替代图表库:
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配置。
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']
}]}
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')
])
path: '/js'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.