Soy nuevo en javascript y tengo que usar las bibliotecas de Chart.js Tengo en un archivo jsp la siguiente instrucción para un botón
ventana.open("prueba.jsp", "ancho="+800+ "alto="+580);
y en el archivo test.jsp este código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <script type=“text/javascript”> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/Chart.min.js"></script> <script type=“test.jsp”> <script type=“text/javascript”> var ctx = document.getElementById('myChart'); var stars = [135850, 52122, 148825, 16939, 9763]; var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi']; var myChart = new Chart(ctx, { type: 'bar', data: { labels: frameworks, datasets: [{ label: 'Github Stars', data: stars }] }, }) </head> <body> <canvas id="myChart" width="800" height="400"></canvas> </body> </html>Puedo abrir la nueva ventana pero no puedo ver nada dentro. Me gustaría que todo el código se ejecute en un archivo jsp, sin delegar en archivos js y html externos.
Hay diferentes problemas en su código.
...Chart.min.js , escriba ...chart.min.js (en minúsculas).function y ejecútelo solo una vez que el body y su canvas estén completamente cargados ( <body onload="drawChart()"> ). Eche un vistazo al código HTML ejecutable a continuación, debería ejecutarse de manera similar con JSP .
<!DOCTYPE html> <html lang="en"> <head> <title>test</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <script type="text/javascript"> function drawChart() { var stars = [135850, 52122, 148825, 16939, 9763]; var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi']; new Chart('myChart', { type: 'bar', data: { labels: frameworks, datasets: [{ label: 'Github Stars', data: stars }] }, }); } </script> </head> <body onload="drawChart()"> <canvas id="myChart" width="800" height="400"></canvas> </body> </html>