Estoy generando este gráfico de líneas de Google con la API de Google JS. Como puede ver, las etiquetas son muy estrechas. ¿Cómo lo hago para que todo el texto de la etiqueta esté visible?¿Cómo configurar el ancho de la leyenda de Google Charts en JavaScript?
Aquí hay algunos ejemplos basados en el google code playground line charts. Ajuste de la opción Ancho ChartArea da más espacio para las etiquetas:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
chartArea: {width: '50%'}}
);
Si se trata de una opción, también se puede colocar las etiquetas debajo de la tabla, que da mucho más espacio:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
legend: 'bottom'}
);
He encontrado esta solución yo mismo. Esperaba una propiedad que se pudiera usar para establecer el ancho de la leyenda.Si no habrá respuestas durante el fin de semana, marcaré esta como correcta. –
La leyenda parece estar incluida en el área del gráfico. Hacer el área del gráfico más pequeña deja aún menos espacio para la leyenda. – pbz
Las opciones de configuración para el gráfico de líneas indican que chartArea debe representar dónde se dibuja el gráfico, excluyendo los ejes y las leyendas, pero podría estar malinterpretando esto. La muestra del patio de recreo parece funcionar como esperaba. ¿Qué salida estás notando? – oli
Usted necesita para hacer el gráfico más ancho o más etiquetas más corto.
Sí ... pensé en eso, pero hice mi cuadro de 1000 píxeles de ancho (totalmente inaceptable) pero las etiquetas todavía no encajan. –
También podría ayudar si hizo que los valores del eje Y sean más pequeños. Usa kb/sec o mb/seg. –
Ampliando la opción ChartArea a un ancho del 100% me solucionó el problema. Al contrario de la documentación, el chartArea sí incluye la leyenda. Usé un PieChart pero la misma opción está disponible para el LineChart.
var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);
Parece ser excluido ahora. Bajar el ancho me funcionó. – keyser
Bajar el ancho me funcionó también. – user1477388
Hay una opción en legend.textStyle podemos personalizar los estilos de leyenda de texto dentro de tablas de Google
var options = {
legend: { textStyle: { fontSize: 78 //size of the legend
} }
}
La propiedad 'legend.textStyle' no proporciona una solución a la pregunta. Consulte aquí: https://developers.google.com/chart/interactive/docs/gallery/piechart –
Ninguna de las respuestas anteriores funcionó bien para mí. Configurando ancho a menos del 100% centra el área de trazado y deja demasiado espacio no utilizado a la izquierda. Establecerlo al 100% tampoco es una solución.
lo que funcionó bien - see live working fiddle - es establecer el derecho valor para dar cabida a la leyenda, a continuación, ajustar el izquierda valor con el tiempo, para el título y las etiquetas de eje Y. El área de trazado ancho se ajustará automáticamente entre estos dos márgenes fijos:
var options = {
...
legend: { position: 'right' },
chartArea: {
right: 130, // set this to adjust the legend width
left: 60, // set this eventually, to adjust the left margin
},
...
};
Podría incluir código de ejemplo? El ejemplo en http://code.google.com/apis/ajax/playground/?type=visualization muestra mucho más texto en las anotaciones sin que se recorte. –
@Bernhard Hoffman: ¿A qué ejemplo se refiere? –
Puestas demasiado tiempo para hacer que los gráficos de muestra se vean bien y te olvidaste de las funciones básicas como algunas leyendas y opciones de eje (este eje y + entero, por ejemplo) ... Además, la API no es la más intuitiva que yo lo he usado – keyser