использовать systemjs на базовой ванильной js-странице - PullRequest
Новая
       32

использовать systemjs на базовой ванильной js-странице

1 голос
/ 24 мая 2019

Я пытаюсь использовать компонент диаграммы из Syncfusion в простом разрабатываемом приложении.

Это чистый JS, без Angular, без React, без TypeScript. Я даже не использовал NPM

Моя проблема в том, что я не могу импортировать файлы, необходимые для работы компонента диаграммы!

Следуя документации, найденной здесь https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/

Я добавил systemjs.config.js в свою папку /_assets/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 ... Я не использую Angular и React.

В папке / _assets / vendors / Syncfusion / я вставил все файлы сценариев Syncfusion: enter image description here

Затем на своей странице 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 не определен

Ответы [ 2 ]

2 голосов
/ 28 мая 2019

Мы проанализировали ваш запрос.И мы подготовили образец на основе ваших требований.Для рендеринга диаграмм 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

Пожалуйста, верните нас, если у вас есть какие-либо вопросы.

С уважением,

Детка.

1 голос
/ 31 мая 2019

Мы проанализировали ваш запрос. Если вы хотите загружать только сценарии диаграммы вместо загрузки целых сценариев. Вы можете ссылаться только на диаграммы и их сценарии зависимостей.

Найдите приведенный ниже фрагмент кода, чтобы выполнить это требование, 

<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>

Образец для ознакомления можно найти по ссылке ниже, образец диаграммы

Пожалуйста, верните нас, если у вас есть какие-либо вопросы.

С уважением, Детские.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...