Cómo personalizar el gráfico 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.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');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     '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>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Especifica opciones

Todos los gráficos tienen muchas opciones personalizables, incluidos el título, los colores, el grosor de las líneas y el relleno del fondo, entre otras. Aunque el equipo de Herramientas de gráficos se esforzó mucho en la apariencia predeterminada de los gráficos, es posible que desees personalizar tu gráfico, por ejemplo, para agregar títulos o etiquetas de eje.

Especifica opciones personalizadas para tu gráfico. Para ello, define un objeto JavaScript con las propiedades option_name/option_value. Usa los nombres de opción que se indican en la documentación del gráfico. La documentación de cada gráfico incluye un conjunto de opciones personalizables. Por ejemplo, las opciones disponibles para el gráfico circular incluyen "legend", "is3D" y "title". Todas las opciones tienen un valor predeterminado documentado.

El siguiente objeto define la posición de la leyenda, el título del gráfico, el tamaño del gráfico y una opción 3D para un gráfico circular:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Actualiza el objeto de opciones del ejemplo anterior con estos valores para ver cómo afectan el gráfico.

Especificar el tamaño del gráfico

Una opción muy común para establecer es el alto y el ancho del gráfico. Puedes especificar el tamaño del gráfico en dos lugares: en el código HTML del elemento <div> del contenedor o en las opciones del gráfico. Si especificas el tamaño en ambas ubicaciones, el gráfico generalmente diferirá al especificado en el código HTML. Si no especificas un tamaño de gráfico en el código HTML o como opción, es posible que no se procese correctamente.

Especificar el tamaño en uno de los lugares tiene ventajas:

  • Especifica el tamaño en HTML: Un gráfico puede tardar unos segundos en cargarse y procesarse. Si ya tienes el tamaño del contenedor de gráficos en HTML, el diseño de la página no se desplazará cuando se cargue el gráfico.
  • Especificación del tamaño como una opción de gráfico: Si el tamaño del gráfico se encuentra en JavaScript, puedes copiar y pegar o serializar, guardar o restablecer el código JavaScript, y cambiar el tamaño del gráfico de manera coherente.

 

Más información