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>

但是当我从本地开发Web服务器运行页面时，我得到了：

测试：94未捕获到的ReferenceError：未定义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>

示例链接：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>

可以在下面的链接中找到供参考的样本，图表样本

如有任何疑问，请回复我们。

关于，宝贝

在基本的香草js页面中使用systemjs

2 个答案: