0

Con le siguiente código con Chart.js en una sitio con django no se me visualiza un gráfico.

El este es el código que use:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>   

<div class="row">
    <canvas id="myChart" height="400" with="400"></canvas>
</div>


<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx,{
    type:"bar",
    data:{
      labels:['col1','col2','col3'],
      datasets:[{
           label:'Num de datos',
           data:[10,8,15]
      }]
    }
  });
</script>

Que problema me pudiera estar ocasionando que no se visualice en gráfico.

2
  • Es necesario que agregues detalles como el mensaje de error tu codigo esta bien pero quizas no has establecido de forma correcta la libreria en tu proyecto.
    – user327285
    Commented el 28 abr. a las 19:03
  • Es que no sale ningún error simplemente no se muestra el gráfico.
    – Santy
    Commented el 28 abr. a las 22:44

1 respuesta 1

3

Estás importando el archivo incorrecto. Hoy existe varias formas de integrar las librerias externas, la que presenta tu código es haciendo uso de módulos, pero de la forma que lo estas ingregando es con UMD

Chartjs agrega la sigla UMD al nombre del archivo para permitir diferenciarlos, y es ese archivo el que tienes que agregar. Es decir, vas al CDN buscas la que en su nombre diga UMD y la seleccionas

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="row">
    <canvas id="myChart" height="400" with="400"></canvas>
</div>


<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx,{
    type:"bar",
    data:{
      labels:['col1','col2','col3'],
      datasets:[{
           label:'Num de datos',
           data:[10,8,15]
      }]
    }
  });
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.