1

Tengo estos datos (son 10 elementos) que quiero mostrar en un grafico de barras, pero la gráfica no la muestraNo muestra nada y en la consola muestra los erros de abajo. Si me quedo con 6 elementos, la gráfica si se muestramuestra la gráfica con un max de 6 elementos. Hasta donde tengo entendido supuestamente el error decía que se mide antes y luego se muestran las barras con respecto al espacio que lo contiene, si es mayor a este entonces no lo muestra y sale error. Estos son los errores que me salen, ojalá me puedan ayudar.. tal vez un codigo que deba añadirle al archivo morris.js introducir la descripción de la imagen aquí

Este es el cógido de guía de cuantos elementos debería mostrar

var Barras = Morris.Bar({
                        element: 'hero-bar',
                        data: [
                            {device: 'Computadora', a: 7, b:2 },
                            {device: 'Anexo' , a: 15,b:17 },
                            {device: 'Celular'  , a: 3, b:5 },
                            {device: 'E. especializado' , a: 12, b:11 },
                            {device: 'Otros', a: 2, b:15},
                            {device: 'Impresora' , a: 12, b:20},
                            {device: 'Scan', a: 3, b:10},
                            {device: 'Fotocopiadora' ,a: 8,b:5},
                            {device: 'M. de trabajo', a: 11, b:7},
                            {device: 'S/E/T' , a: 5, b:2},               
                        ],
                        xkey: 'device',
                        ykeys: ['a','b'],
                        labels: ['Normal','Recuperacion'],
                        barGap:0.1,
                        parseTime : false,
                        barSizeRatio: 0.5,
                        xLabelMargin: 2,
                        hideHover:'auto',
                        resize: true,

Cabe decir que si probé aumentando el tamaño de la ventana y todo, pero nada

6
  • 1
    Estamos dispuestos a ayudarte, pero coloca en código, no en imagen, sino en texto. La edición de preguntas ofrece la opción de colocar texto como código con el icono que tiene las llaves { } Commented el 7 jun. 2021 a las 2:38
  • Puedes colocar la respuesta para que sea de utilidad para otros de la comunidad. Commented el 7 jun. 2021 a las 2:55
  • @JeanGotopo perdón soy nuevo en esto, ya coloqué el código como me dijiste. Ya había intentado buscar una solución y es esta github.com/morrisjs/morris.js/issues/476 a mi no me funcionó, pero a alguien más tal vez
    – Angello
    Commented el 7 jun. 2021 a las 3:03
  • Ok, aun tienes el problema? entendí por el comentario anterior que ya habías solucionado. Commented el 7 jun. 2021 a las 3:04
  • @JeanGotopo aún tengo el problema
    – Angello
    Commented el 7 jun. 2021 a las 3:08

1 respuesta 1

0

Prueba de esta manera:

    var Barra = Morris.Bar{
     element:'hero-bar',
     data[
      {device: 'Computadora', a: 7, b:2 },
      {device: 'Anexo' , a: 15,b:17 },
      {device: 'Celular'  , a: 3, b:5 },
      {device: 'E. especializado' , a: 12, b:11 },
      {device: 'Otros', a: 2, b:15},
      {device: 'Impresora' , a: 12, b:20},
      {device: 'Scan', a: 3, b:10},
      {device: 'Fotocopiadora' ,a: 8,b:5},
      {device: 'M. de trabajo', a: 11, b:7},
      {device: 'S/E/T' , a: 5, b:2},
        ],
        config = {
          data: data,
          xkey: 'device',
          ykeys: ['a', 'b'],
          labels: ['Normal', 'Recuperación'],
          fillOpacity: 0.6,
          hideHover: 'auto',
          behaveLikeLine: true,
          resize: true,
          pointFillColors:['#ffffff'],
          pointStrokeColors: ['black'],
          lineColors:['gray','red']
      }};

Si no funciona, prueba cambiando el element de 'hero-bar' a 'bar-chart'

6
  • No me funciona , solo funciona con números puestos manualmente (ej. a:18, b:20) Pero yo lo trabajo con variables, extrayendo de esos numeros de un span (ej. COMPU=$('#NombreID').text();) luego en data a: COMPU. Así solo me acepta hasta un maximo de 6 elementos
    – Angello
    Commented el 7 jun. 2021 a las 14:25
  • Ok pero en el código que has compartido, no se nota que lo hayas extraído de otra parte, es lo importante de la claridad en las preguntas. Por ello, debes compartir todo trozo de código que tenga que ver con tu problema. Commented el 7 jun. 2021 a las 14:42
  • Si!, ahí era el problema. Gracias por la ayuda
    – Angello
    Commented el 7 jun. 2021 a las 14:56
  • Con $('#NombreID').text(); me parece que lo convierte en string y quizás te pida números. SI los estas extrayendo sería guardar los valores de a en un arreglo y los valores de b en otro, luego tendrías algo como: {device: 'Computadora', a: a[0], b:[0] } Commented el 7 jun. 2021 a las 15:15
  • 1
    Si me funciona con el .text() es solo para obtener el valor del <span>. Mi error fue que puse el nombre de un ID equivocado . Si, eso ultimo que dices si lo hice , gracias!
    – Angello
    Commented el 7 jun. 2021 a las 16:40

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.