我正在尝试在我正在开发的简单应用程序中使用 Syncfusion 的图表组件。
它是纯 JS，没有 Angular，没有 React，没有 TypeScript。我什至没有使用过 NPM
我的问题是我无法导入使图表组件正常工作所需的文件!
遵循此处创建的文档 https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/
我在我的文件夹/_assets/systemjs.config.js 中添加了一个 systemjs.config.js 并且我已经这样配置了:
System.config({
paths: {
'syncfusion:': './_assets/vendors/Syncfusion/@syncfusion',
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
它谈论“app”，但我没有app变量...我既没有使用 Angular，也没有使用 React。
在/_assets/vendors/Syncfusion/文件夹中，我插入了 Syncfusion 的所有脚本文件:
然后在我的 HTML 页面中添加:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="/_assets/js/systemjs.config.js"></script>
但是当我从本地开发网络服务器运行页面时，我得到:
测试:94 Uncaught ReferenceError: ej is not defined
最佳答案
我们已经分析了您的查询。我们已经根据您的要求准备了 sample 。要渲染 EJ2 图表，您只需要引用以下脚本。无需像您已完成的配置那样配置 system.cofig。我们已经从我们这边更改了文档。它将在六月份刷新。
请找到下面的代码片段来实现这个要求，
<head>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="line-container" align="center"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing
});
chart.appendTo('#line-container');
</script>
</body>
示例链接:https://stackblitz.com/edit/3ugmn8?file=index.html
如果您有任何疑虑，请回复我们。
问候，
宝贝。
关于javascript - 在基本的 vanilla js 页面中使用 systemjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56291349/