GOOGLE ADS

lunes, 2 de mayo de 2022

protoype js 1.0.6 está en conflicto con chart js


<!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

Regla de Firestore para acceder a la generación de subcolección Permisos faltantes o insuficientes

Tengo problemas con las reglas de Firestore para permitir el acceso a algunos recursos en una subcolección. Tengo algunos requests document...