Issue
I tried to use Chart.js in my Django project , when I Use NPM package it's not working but when I use CDN It work Perfectly
char.js version 3.9.1
here is my index.html file on my project
<!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>
my console error in browser is :
(index):17 Uncaught ReferenceError: Chart is not defined
at (index):17:17
I tried to use chart.min.js in my script but not working. I also Try previous version of charj.js but still not working. I also copy code on CDN and put it locally on project but still not working.
Solution
Must Use static path so django can server js file
Project Name
app Name
static
js
css
img
Answered By - alfred
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.