Eliminar el relleno o los márgenes de los gráficos de Google

151

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');

  var myData = {
    'Mushrooms': 3,
    'Onions': 1,
    'Olives': 1,
    'Zucchini': 1,
    'Pepperoni': 2
  };

  var rows = [];
  for (element in myData) {
      rows.push([element + " (" + myData[element] + ")", myData[element]])
  }
  data.addRows(rows);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':450,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Violín de ejemplo

¿Cómo elimino el relleno o los márgenes en este ejemplo?

Paul Armdam
fuente
si alguien quiere justificar a la derecha porque tiene medidas a la izquierda del gráfico de líneas, chartArea: {width: '70%', left: '30%'}fue el truco para mí. Fuente: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Respuestas:

246

Al agregar y ajustar algunas opciones de configuración que figuran en la documentación de la API , puede crear muchos estilos diferentes. Por ejemplo, aquí hay una versión que elimina la mayor parte del espacio en blanco adicional ajustando el chartArea.widthde 100% y chartArea.heightal 80% y moviendo el legend.positionde abajo :

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

Si desea ajustarlo más, intente cambiar estos valores o usar otras propiedades del enlace de arriba.

Eggxactly
fuente
78

Llego bastante tarde, pero cualquier usuario que lo busque puede obtener ayuda. Dentro de las opciones puede pasar un nuevo parámetro llamado chartArea .

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

Las opciones izquierda y superior definirán la cantidad de relleno desde la izquierda y la parte superior. Espero que esto ayude.

Aman Virk
fuente
chartArea.top hizo el truco para mi div de tamaño dinámico. Gracias.
Blamkin86
60

Llegué aquí como la mayoría de las personas con este mismo problema, y ​​me quedé sorprendido de que ninguna de las respuestas funcionara ni remotamente.

Para cualquier persona interesada, esta es la solución real:

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

La clave aquí no tiene nada que ver con los valores "izquierdo" o "superior". Pero más bien que el:

Las dimensiones tanto del gráfico como del área del gráfico se establecen y establecen en el MISMO VALOR

Como una enmienda a mi respuesta. Lo anterior resolverá el problema "excesivo" de relleno / margen / espacio en blanco. Sin embargo, si desea incluir etiquetas de ejes y / o una leyenda , deberá reducir la altura y el ancho del área del gráfico, de modo que quede algo por debajo del ancho / alto exterior. Esto "le dirá" a la API de gráficos que hay suficiente espacio para mostrar estas propiedades. De lo contrario, felizmente los excluirá.

pimbrouwers
fuente
2
Como una enmienda a mi respuesta. De hecho, esto resolverá el problema "excesivo" de relleno / margen / espacio en blanco. Sin embargo, si desea incluir etiquetas de ejes y / o una leyenda, deberá reducir la altura y el ancho del área del gráfico, de modo que quede algo por debajo del ancho / alto exterior. Esto "le dirá" a la API de gráficos que hay suficiente espacio para mostrar estas propiedades. De lo contrario, felizmente los excluirá.
pimbrouwers
1
Creo que la razón por la que las otras soluciones no funcionaron para usted es probablemente que asumieron que el gráfico se estaba insertando en un DIV que ya tenía atributos de ancho y alto preestablecidos, pero no lo había hecho. Es una buena idea preestablecer el alto y el ancho en el HTML para que el diseño de la página no cambie cuando se llene el gráfico. Eso evitará que las cosas "salten" en la página a medida que se carga.
Dave Burton
@Dave gracias por la sugerencia, pero no estoy necesariamente de acuerdo. Hay muchas situaciones en las que simplemente no sabes cuáles serán esos valores. Y parece que al menos otras 15 personas sienten que mi oferta es adecuada.
pimbrouwers
1
Estoy de acuerdo, Pim. Cuando no conoce el ancho y / o el alto de antemano (tal vez porque desea que la página se adapte de manera receptiva), no puede preestablecer el ancho y el alto en el DIV. Solo estaba señalando por qué creo que las soluciones dadas en las otras respuestas funcionaron para ellos pero no funcionaron para usted, y por qué es una buena idea preestablecer el ancho y la altura en el DIV si puede.
Dave Burton
1
Por razones que @DaveBurton señala, esta es probablemente la respuesta correcta si se trabaja con CSS Grid (que yo soy)
Stephen R
14

Falta en los documentos (estoy usando la versión 43), pero en realidad puede usar la propiedad derecha e inferior del área del gráfico:

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

Por lo tanto, es posible usar el ancho y la altura de respuesta completa y evitar que se corten las etiquetas o leyendas de los ejes.

Robar
fuente
Ser capaz de usar correctamente es definitivamente una buena adición, sin embargo, en el caso de un gráfico de columnas que requiere números para el eje vertical, será complicado cuando los valores fluctúen un poco, por ejemplo, un gráfico con valores que oscilan entre 0 y 100 requeriría un valor izquierdo de 20 píxeles, pero 0 - 10 mil necesitaría 100 píxeles, y el uso de 100 píxeles dejaría un margen bastante grande, que es lo que creo que todos estamos tratando de eliminar :) A menos que haya Una opción que permite que el gráfico ajuste su propio ancho que me falta. ¿Alguna idea sobre cómo se podría resolver esto?
user3800174
Parece que lo documentaron el 2 de octubre de 2015, aquí: archive.is/lwbQY#selection-2997.0-3011.1
Dave Burton el
13

Existe esta posibilidad como mencionó Aman Virk :

var options = {
    chartArea:{left:10,top:20,width:"100%",height:"100%"}
};

Pero tenga en cuenta que el relleno y el margen no están ahí para molestarlo. Si tiene la posibilidad de cambiar entre diferentes tipos de gráficos como ColumnChart y el que tiene columnas verticales, entonces necesita un margen para mostrar las etiquetas de esas líneas.

Si quita ese margen, terminará mostrando solo una parte de las etiquetas o ninguna etiqueta.

Entonces, si solo tiene un tipo de gráfico, puede cambiar el margen y el relleno como dijo Arman. Pero si es posible cambiar, no los cambie.

MmynameStackflow
fuente
11

Hay un tema disponible específicamente para esto

options: {
  theme: 'maximized'
}

de los documentos gráficos de Google:

Actualmente solo hay un tema disponible:

'maximizado': maximiza el área del gráfico y dibuja la leyenda y todas las etiquetas dentro del área del gráfico. Establece las siguientes opciones:

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Ludo - Off the record
fuente
Esta parece la mejor opción. Después de configurar el tema: 'maximizado', todavía es posible ajustar la apariencia, por ejemplo, altura: '90%', texto Posición: 'fuera', etc.
Jiri Kriz