Как использовать непакетную библиотеку JS / JQuery в приложении на основе модуля ES (Angular) - PullRequest
0 голосов
/ 30 октября 2019

Я пытаюсь использовать библиотеку jqchart в проекте Angular. инструкции библиотеки относятся к пачке файлов в тегах link, которые поступают от who-знает-где (они не включены в пакет на их странице загрузки), поэтому я в значительной степени озадаченначало.

    <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" media="screen" 
            href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mousewheel.js" type="text/javascript"></script>

Код jquery продолжается с

$(document).ready(function () {
        $('#selector').jqChart({
            title: { 
                text: 'Chart Title' 
            },
etc
etc

И я не знаю, откуда взялся бы jqChart.

Я знаю, что это не такне особенно специфичен для Angular и подходит для большинства современных фреймворков. И, честно говоря, поскольку я не знаю, откуда эти связанные файлы должны появиться, мне не совсем понятно, как заставить их код работать в базовом HTML-проекте!

Так чтоВопрос в том, как заставить работать код по ссылке выше?


В Angular я попытался вставить код jquery в мою ngAfterViewInit функцию

$(document).ready(function () {
      $('#selector').jqChart({
        title: {
          text: 'Chart Title'
        },
        axes: [
          {
            type: 'category',
            location: 'bottom',
            zoomEnabled: true
          }
        ],
        series: [
          {
            type: 'column',
            data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
              ['E', 27], ['F', 85], ['D', 43], ['H', 29]]
          },
          {
            type: 'line',
            data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
              ['E', 70], ['F', 60], ['D', 88], ['H', 22]]
          }
        ]
      });
    });

Как и предполагалось, jqChart не определено. Я обнаружил jquery.jqChart.min.js, к которым они относятся, и импорт этого файла в файл компонента вызывает сбой при jquery, не найденном, потому что этот импортированный файл ссылается на jquery. Импорт источника jquery до jqChart не помогает.

Я также пытался поместить пример кода из этой страницы в метод ngAfterViewInit. Этот пример кода HTML (без импорта link или script, который использует встроенный JS в теге script. Важная часть примера кода JS:

 var chart = new DataViz.Chart({
                title: 'Axis Zooming',
                animation: { duration: 1 },
                axes: [
                    // config for axes
                ],
                border: {
                    strokeStyle: '#6ba851'
                },
                background: background,
                series: [
                   // config for series
                ]
            });

Но, конечно, яполучаю ошибку, что DataViz не определено. Я даже нашел файл dataviz.chart.min.js, который страница импортирует в своем собственном источнике, но импортировать его в код моего компонента не помогает.

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