在基本的 vanilla js 页面中使用 systemjs

Question

我正在尝试在我正在开发的一个简单应用程序中使用 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 未捕获的引用错误：未定义 ej

Answer 1

我们已经分析了您的查询。我们已经根据您的要求准备了样品。要渲染 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>

示例 link：https://stackblitz.com/edit/3ugmn8?file=index.html

如果您有任何疑虑，请回复我们。

此致，

宝贝。

Answer 2

我们已经分析了您的查询。如果您只想加载图表脚本而不是加载整个脚本。您可以单独引用图表及其依赖脚本。

请找到以下代码片段来实现此要求，

<head>
    <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
var chart = new ej.charts.Chart({
  // Other customization
});
chart.appendTo('#container');
</script>
</body>

可以从下面找到供您参考的示例link，图表样本

如果您有任何疑虑，请回复我们。

此致，宝贝.

在基本的 vanilla js 页面中使用 systemjs

use systemjs in a basic vanilla js page

javascript

syncfusion

systemjs