Javascript 使用网页包加载AmCharts+;打字稿
我遇到了一些严重的问题,让任何图表库使用webpack+typescript。我现在正在使用AmCharts,并且已经在定义文件上做了一些工作,以使typescript编译器能够识别模块语法 我的网页包配置设置如下: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,
"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:
通过使用窗口变量sowindow.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'