javascript - tipos - google charts tutorial español

Eliminar el relleno o los márgenes de Google Charts

Question

// 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>

Ejemplo de violín

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

Answer 1

Al agregar y ajustar algunas opciones de configuración enumeradas 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 al establecer chartArea.width en 100% y chartArea.height en 80% y mover la legend.position al final :

// 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 quiere sintonizarlo más, intente cambiar estos valores o usar otras propiedades del enlace de arriba.

Answer 2

Estoy bastante retrasado, 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 desde la parte superior. Espero que esto ayude

Answer 3

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 un 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 tienes un tipo de gráfico, entonces puedes cambiar el margen y el relleno como dijo Arman. Pero si es posible cambiar, no los cambies.

Answer 4

Falta en los documentos (estoy usando la versión 43), pero puede usar las propiedades 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 utilizar ancho y alto de respuesta completa y evitar que se recorte cualquier etiqueta o leyenda de eje.

Answer 5

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

Para cualquier persona interesada, aquí está 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 son SET y se establecen en el MISMO VALOR

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