Google Charts - Grafico a combinazione

Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dall'elenco seguente: linea, area, barre, candelabri e area a gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare le proprietà di ciascuna serie individualmente. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.

Configurazioni

Noi abbiamo usato ComboChart class per mostrare il grafico basato sulla combinazione.

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

Esempio

googlecharts_combination_chart.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">
         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([
               ['Fruit', 'Jane', 'John', 'Average'],
               ['Apples', 3, 2, 2.5],
               ['Oranges', 2, 3, 2.5],
               ['Pears', 1, 5, 3],
               ['Bananas', 3, 9, 6],
               ['Plums', 4, 2, 3]      
            ]);
              
            // Set chart options
            var options = {
               title : 'Fruits distribution',
               vAxis: {title: 'Fruits'},
               hAxis: {title: 'Person'},
               seriesType: 'bars',
               series: {2: {type: 'line'}}
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ComboChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Risultato

Verifica il risultato.