Проблема с интеграцией библиотек в HTML - Chart.JS

#javascript #google-chrome-extension

#javascript #google-chrome-расширение

Вопрос:

Я пытаюсь открыть пример диаграммы из Chart.js документации в расширении Google Chrome.

Однако я сталкиваюсь с проблемой, line 2 из-за которой я получаю Uncaught ReferenceError: Chart is not defined ошибку.

Какие изменения мне нужно внести, чтобы устранить эту проблему?

Имейте в виду, что у меня есть javascript во внешнем файле, а не локализованный во html файле, как в документации. Это должно быть сделано из-за механизма безопасности Chrome

HTML

 <html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body class="background-opening-page">
        <div>
            <div>
                <div>text</div>
            </div>
        </div>
        <div>
            <div id="line-of-text">a line of text</div>
            <script src="popup.js"></script>
        </div> 
        <div>
            <canvas id="myChart" width="400" height="400"></canvas>
            <script src="draw-chart.js"></script>
        </div>
    </body>
</html>

Javascript

 var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

1. Как выполняется код JavaScript? Chart.js возможно, не было initialized

2. > Как выполняется код JavaScript? Что вы точно имеете в виду под этим, лол. Я довольно новичок в javascript, поэтому я точно не знаю, как ответить на ваш вопрос.

3. Это файл js draw-chart.js ? Также я не вижу, где Chart.js импортируется в этот HTML-файл

4. Да, файл js является draw-chart.js . Я должен был быть более кратким с этим mb. Я также не импортировал модуль: Я упс. Должен ли я просто добавить import('./node_modules/chart.js'); в верхней части файла javascript?

5. Добавьте это в свой <head></head> тег — <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Ответ №1:

Загрузите chart.js файлы локально и добавьте в <head></head> теги, подобные этому —

 <script src="path/to/chartjs/dist/Chart.js"></script>

Также, пожалуйста, переместите это <script src="draw-chart.js"></script> в <head></head> тег после Chart.js тега. Вы не должны добавлять <script> теги внутри <body> тега.