<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.6.0.3/prototype.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="100" height="200"></canvas>
<script>
window.onload = () => {
let myElm = document.createElement("script"); // Create a new element
myElm.src = 'https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js';
myElm.setAttribute ('defer',true); // Change the text of the element
myElm.setAttribute ('type','module'); // Change the text of the elementù
//document.querySelector('head').prepend(myElm); // Add the object to the DOM
}
let jq = jQuery.noConflict()
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>
<script type="text/javascript" defer >
var ctx = document.getElementById('myChart').getContext('2d');
document.addEventListener("DOMContentLoaded", function(event) {
console.log(Prototype.Version);
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
}
}]
}
}
});
});
</script>
</body>
</html>
Solución del problema
El problema no está en chart.js. Si elimina todo excepto el prototipo, sigue arrojando el mismo error de que this.each no está definido. Entonces parece ser un error en esa versión del prototipo. Entonces, para resolverlo, solo necesita actualizar a una versión más nueva.
No hay comentarios:
Publicar un comentario