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>

 

Especificar opciones

Cada gráfico tiene muchas opciones personalizables, como el título, los colores, el grosor de las líneas, el relleno del fondo, etc. Si bien el equipo de las herramientas de gráficos trabajó arduamente en la apariencia predeterminada de los gráficos, es posible que usted quiera personalizarlos, por ejemplo, para agregar etiquetas de título o de ejes.

Para especificar opciones personalizadas para tu gráfico, define un objeto JavaScript con propiedades option_name/option_value. Usa los nombres de opciones que aparecen en la documentación del gráfico. En la documentación de cada gráfico, se muestra un conjunto de opciones personalizables. Por ejemplo, las opciones disponibles para un gráfico circular incluyen "legend", "is3D". 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
}

Actualice el objeto de opciones en el ejemplo anterior con estos valores para ver cómo afectan al gráfico.

Especifica el tamaño del gráfico

Una opción común es establecer la altura 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 se diferirá al tamaño especificado en el código HTML. Si no especificas un tamaño en el HTML o en una opción, es posible que no se procese correctamente.

Existen ventajas de especificar el tamaño en uno o en el otro lugar:

  • Especificación del tamaño en HTML: un gráfico puede tardar unos segundos en cargarse y procesarse. Si el tamaño del contenedor del gráfico ya está en HTML, el diseño de la página no cambiará cuando se cargue el gráfico.
  • Especificación del tamaño como una opción del gráfico: si el tamaño del gráfico está en JavaScript, puede copiarlo y pegarlo, o bien serializarlo, guardarlo y restablecerlo, y hacer que se cambie el tamaño del gráfico de forma coherente.

 

Más información