1

He tratado de insertar graficas en mi sitio cargandolas desde un archivo de js, como no estoy utilizando Node.js utilize la libreria ClientModulesJS para poder requerir Chart.js, pero al memento de ejecutar el codigo canvas se queda en blanco y no se muestra nada y tampoco ningun error en consola. El codigo que utilize es el siguiente:

Index.php

<script src="vistas/js/jquery.min.js"></script>
<script src="librerias/ClientModulesJS-master/client-modules.js"></script>
<canvas id="myChart" style="width: 100%; height: 234px;"></canvas>
<script src="vistas/js/dashboard.js"></script>

dashboard.js

// Acciones
$(document).ready(function(){
    crearGrafica();
});

// Ajax

// Funciones
function crearGrafica(){
    require('librerias/chart.js-3.5.1/package/dist/chart.min').then(function(Chart){
        var ctx = document.getElementById('myChart').getContext('2d');
        var graficaVentas = new Chart(ctx, {
            labels: ['Enero', 'Febrero', 'Marzo', 'Mayo', 'Junio'],
            datasets: [{
              label: 'My First Dataset',
              data: [65, 59, 80, 81, 56, 55],
              fill: false,
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.1
            }]
          });
    }).catch(function(error){
        console.log(error);
    });
}

1 respuesta 1

0

Tienes mal configurada la estructura de tus datos cuando creas el Chart. Las labels y los datasets van dentro de la propiedad data.

Te adjunto un ejemplo con tu código.

var ctx = document.getElementById('myChart');
var graficaVentas = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Enero', 'Febrero', 'Marzo', 'Mayo', 'Junio'],
      datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]}
  });
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" style="width: 100%; height: 234px;"></canvas>

Tu Respuesta

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

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