Gráficos de Google: gráfico escalonado apilado

A continuación se muestra un ejemplo de un gráfico de áreas escalonadas apiladas. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.

Configuraciones

Hemos usado isStacked configuración para mostrar el gráfico apilado.

// Set chart options
var options = {
   isStacked: true
};

Ejemplo

googlecharts_stepped_stacked.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
               ['Alfred Hitchcock (1935)', 8.4,         7.9],
               ['Ralph Thomas (1959)',     6.9,         6.5],
               ['Don Sharp (1978)',        6.5,         6.4],
               ['James Hawes (2008)',      4.4,         6.2]
            ]);

            var options = {
               title: 'The decline of \'The 39 Steps\'',
               vAxis: {title: 'Accumulated Rating'},
               isStacked: true      
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.SteppedAreaChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Resultado

Verifica el resultado.

↰ Previous page