Quiero mostrar el gráfico en chart.js con datos de cookies. Puedo ver los valores con console.log . Pero no sé por qué motivo los datos no aparecen en el gráfico.
Utilizo una función para leer la cookie de la siguiente manera.
function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }Entonces pruebo poner datos en la cookie y leo como:
document.cookie="dat=60, 80, 81, 56, 55, 40"; var dat=readCookie(dat);Todo funciona bien sin errores, pero no hay carga de datos en el gráfico. Por favor, eche un vistazo al violín aquí: http://jsfiddle.net/uewnjhgr/1/
Probé su código en mi navegador y descubrí que debe pasar una "Cadena" para la función readCookie() . Además, después de devolver el valor, debe convertirlo a Array para usarlo en los datos de chart.js . Lo hice con la ayuda de JSON.parse . Así que aquí está el código que funciona para mí:
function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } document.cookie="dat=60, 80, 81, 56, 55, 40"; var dat = readCookie("dat"); var datArr = JSON.parse("[" + dat + "]"); console.log(datArr); var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { fillColor: "#79D1CF", strokeColor: "#79D1CF", data: datArr//ref from cookie } ] }; var ctx = document.getElementById("myChart1").getContext("2d"); const myLine = new Chart(ctx, { type: 'line', data: chartData, showTooltips: false, options: { scales: { y: { stacked: true } } } }); // Uncaught TypeError: (new Chart(...)).Line is not a function /* var myLine = new Chart(ctx).Line(chartData, { showTooltips: false, onAnimationComplete: function () { var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function (dataset) { dataset.points.forEach(function (points) { ctx.fillText(points.value, points.x, points.y - 10); }); }) } }); */ <!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> </head> <body> <canvas id="myChart1" height="300" width="500"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script> <script src="cod.js"></script> </body> </html> No utilicé su configuración para el gráfico porque me da un error Uncaught TypeError: (new Chart(...)).Line is not a function .