Проблема с использованием npm для chart.js в проекте django

Я пытался использовать Chart.js в моем Django проекте, когда я использую NPM пакет он не работает, но когда я использую CDN он работает идеально

char.js версия 3.9.1

вот мой файл index.html в моем проекте

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
{#    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>#}
    <script type="application/json" src="/node_modules/chart.js/dist/chart.js"></script>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>


</body>
</html>

моя консольная ошибка в браузере :

(index):17 Uncaught ReferenceError: Chart is not defined
    at (index):17:17

Я пытался использовать chart.min.js в своем скрипте, но не работает. Я также пробовал предыдущую версию charj.js, но все равно не работает. Я также скопировал код из CDN и поместил его локально в проект, но он все равно не работает.

Проблема в том, что Django рендерит html на основе того, что вы объявляете в объекте контекста в ваших представлениях на Python. Django ничего не знает о NPM, NodeJS и папке node_modules.

Обычно, когда вы используете npm для установки пакетов, это потому, что вы используете их в NodeJS проекте, который в конечном итоге будет преобразован в ванильный JS файл без зависимостей для размещения на хостинге.

Поэтому установить Chart.js с помощью npm не получится, потому что он будет храниться в папке node_modules, а Django не знает, что с этим делать. Но когда вы используете cdn, вы практически встраиваете зависимость внутрь html, и теперь на нее можно ссылаться во всех JS скриптах после ее объявления.

Я надеюсь, что это объяснение поможет вам, если есть что-то, что вы думаете, что не объяснено хорошо, пожалуйста, дайте мне знать.

Необходимо использовать статический путь, чтобы django мог обслуживать js файл

Project Name
   app Name
       static
           js 
           css
           img
Вернуться на верх