0

tengo un grafico de tipo column chart en base a este grafico tengo dos dudas que dejo aqui abajo

  1. en la grafica que genero las etiquetas del eje horizontal son demasiado grandes y no se muestra todo el texto, lo que quiero es que se muestre todo el texto.

imagen del graficointroducir la descripción de la imagen aquí

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['', 'Excelente', {
      role: 'annotation'
    }, 'Bueno', {
      role: 'annotation'
    }, 'Regular', {
      role: 'annotation'
    }, 'Deficiente', {
      role: 'annotation'
    }],
    ['Valoración\n general\n de\n la\n atención', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Trato', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Tiempo\n de\n espera', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Información\n clara\n y\n precisa', 75, '75', 25, '25', 0, '0', 0, '0'],

  ]);
  var options = {
    chart: {
      title: 'Comunicación',
      annotations: {
        alwaysOutside: true
      },
      width: 500,
      height: 600,
      legend: 'bottom',
      isStacked: 'percent'
    },

    vAxis: {
      minValue: 0,
      maxValue: 100,
      format: '#\'%\'',
      direction: 1
    },

    hAxis: {
      maxTextLines: 10,
      textStyle: {
        fontSize: 14,
      }
    },

  };

  var chart = new google.visualization.ColumnChart(document.getElementById('div0'));

  chart.draw(data, options);
}
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='div0' style='position:relative;width:90%; height:400px; margin-left:4%; margin-bottom: 5% !important;'>
  </div>
</body>

</html>

  1. la otra consulta que tengo es que defini la escala del eje vertical de 1 a 7 pero esta llega a 8, si defini el maximo como 7 por que llega a 8.

Tambien como puedo hacer para que la escala vaya de 1 en 1(1,2,3,4,5,6,7)y no como se ve en el grafico

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'nota', {
      role: 'style'
    }, {
      role: 'annotation'
    }],
    ['Conocimiento\n del\n tema', 7.0, 'gold', '7.0'],
    ['Puntualidad', 7.0, 'gold', '7.0'],
    ['Claridad\n en\n las\n explicaciones', 7.0, 'gold', '7.0'],
    ['Motiva\n para\n escuchar\n y\n aprender', 7.0, 'gold', '7.0'],
    ['Manejo\n de\n consultas\n y\n discusiones', 6.9, 'gold', '6.9'],
    ['Grado\n que\n cumple\n compromisos\n asumidos', 7.0, 'gold', '7.0'],
  ]);


  var options = {
    title: 'item 1',
    width: 1000,
    height: 400,

    bar: {
      //groupWidth: ''
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      minValue: 0,
      maxValue: 7,
      direction: 1
    },
    hAxis: {
      slantedTextAngle: 70,
      maxTextLines: 100,
      textStyle: {

        fontSize: 12,
      } // or the number you want}
    },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('div0'));
  chart.draw(data, options);
}
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>

<body>
  <div id='div0' style='position:relative;width:80%; height:400px; margin-left:4%; margin-bottom: 5% !important;'>
  </div>
</body>

</html>

1
  • Se debería publicar cada parte como preguntas independientes.
    – Rubén
    el 24 jun. 2017 a las 23:25

2 respuestas 2

1

Aunque se debería incluir una y sólo una pregunta en las preguntas, como la solución a cada parte es muy sencilla y hasta cierto punto similar ya que se trata de ajustes a las opciones de gráficas del mismo tipo y cuya documentación está en la misma referencia, respondo ambas en esta respuesta.

Primera parte

Las opciones de configuación están documentadas en https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

En el primer stack snippet de la pregunta, ya se cuenta con un bloque objeto con la configuración del eje horizontal. Se trata de

hAxis: {
  maxTextLines: 10,
  textStyle: {
    fontSize: 14,
  }
}

Me parece que la única alternativa es que reduzcas el tamaño de la letra.

Pregunta similar en inglés

Respuesta a https://stackoverflow.com/q/32818836/1595451

Demo

He puesto el tamaño de la letra en 10 con eso aparentemente ya se ajusta el texto bastante bien.

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['', 'Excelente', {
      role: 'annotation'
    }, 'Bueno', {
      role: 'annotation'
    }, 'Regular', {
      role: 'annotation'
    }, 'Deficiente', {
      role: 'annotation'
    }],
    ['Valoración\n general\n de\n la\n atención', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Trato', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Tiempo\n de\n espera', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Información\n clara\n y\n precisa', 75, '75', 25, '25', 0, '0', 0, '0'],

  ]);
  var options = {
    chart: {
      title: 'Comunicación',
      annotations: {
        alwaysOutside: true
      },
      width: 500,
      height: 600,
      legend: 'bottom',
      isStacked: 'percent'
    },

    vAxis: {
      minValue: 0,
      maxValue: 100,
      format: '#\'%\'',
      direction: 1
    },

    hAxis: {
      maxTextLines: 10,
      textStyle: {
        fontSize: 10,
      }
    },

  };

  var chart = new google.visualization.ColumnChart(document.getElementById('div0'));

  chart.draw(data, options);
}
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='div0' style='position:relative;width:90%; height:400px; margin-left:4%; margin-bottom: 5% !important;'>
  </div>
</body>

</html>

Segunda parte

La escala vertical está definida así:

vAxis: {
    minValue: 0,
    maxValue: 7,
    direction: 1
}

Como no está definido el número de líneas de cuadrícula, se está aplicando el valor predeterminado que es 5. Básicamente lo que hay que hacer es agregar

gridlines: {count: 8}

Lo anterior para que quede una línea de cuadrícula en cada unidad, partiendo de 0.

Demo 2

He comentado las línieas de ancho y alto para que se aprecie mejor la gráfica en stack snippet.

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'nota', {
      role: 'style'
    }, {
      role: 'annotation'
    }],
    ['Conocimiento\n del\n tema', 7.0, 'gold', '7.0'],
    ['Puntualidad', 7.0, 'gold', '7.0'],
    ['Claridad\n en\n las\n explicaciones', 7.0, 'gold', '7.0'],
    ['Motiva\n para\n escuchar\n y\n aprender', 7.0, 'gold', '7.0'],
    ['Manejo\n de\n consultas\n y\n discusiones', 6.9, 'gold', '6.9'],
    ['Grado\n que\n cumple\n compromisos\n asumidos', 7.0, 'gold', '7.0'],
  ]);


  var options = {
    title: 'item 1',
    //width: 1000,
    //height: 400,

    bar: {
      //groupWidth: ''
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      minValue: 0,
      maxValue: 7,
      direction: 1,
      gridlines: {count: 8}
    },
    hAxis: {
      slantedTextAngle: 70,
      maxTextLines: 100,
      textStyle: {

        fontSize: 12,
      } // or the number you want}
    },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('div0'));
  chart.draw(data, options);
}
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>

<body>
  <div id='div0' style='position:relative;width:80%; height:400px; margin-left:4%; margin-bottom: 5% !important;'>
  </div>
</body>

</html>

1
  • 1
    gracias me funciono , respecto a lo de los labels que se escondian como tu dijiste hay que disminuir el tamaño de letra y luego si se quiere agrandar se puede hacer a traves de estilo css, el elemento se llama text de los labels de los graficos, hago este comentario por si alguien tiene una duda parecidad a esta le puede servir. el 27 jun. 2017 a las 20:32
0

la escala escala no puede aparecer a menos que los números que ingresas sean menores, allí lo que hace es que promedia para no poner 1,2... N. Seria muchas columnas

en cuanto alas etiquetas que no saben es por lo largo cambia el ángulo del eje x (hAxis)

var options = { 
title: "Test", 
hAxis: { 
    direction: -1, 
    slantedText: true, 
    slantedTextAngle: 90 //Angulo de la etiqueta 180 
} };
1
  • cambio el angulo pero igual sigue ocultando el texto el 24 jun. 2017 a las 16:46

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.