Linee di tendenza

Panoramica

Una linea di tendenza è una linea sovrapposta a un grafico che rivela la direzione generale dei dati. I grafici di Google possono generare automaticamente linee di tendenza per grafici a dispersione, grafici a barre, grafici a colonne e grafici a linee.

Google grafici supporta tre tipi di linee di tendenza: lineare, polinomiale ed esponenziale.

Linee di tendenza lineari

Una linea di tendenza lineare è la linea retta che si avvicina maggiormente ai dati del grafico. Per essere precisi, è la linea che riduce al minimo la somma delle distanze al quadrato da ogni punto al suo interno.

Nel grafico qui sotto puoi vedere una linea di tendenza lineare su un grafico a dispersione che confronta l'età degli aceri di zucchero con il diametro dei loro tronchi. Puoi passare il mouse sopra la linea di tendenza per visualizzare l'equazione calcolata dai grafici di Google: 4,885 volte il diametro + 0,730.

Per tracciare una linea di tendenza su un grafico, utilizza l'opzione trendlines e specifica la serie di dati da utilizzare:

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Le linee di tendenza lineari sono il tipo più comune. A volte, però, una curva è la migliore per descrivere i dati, e per questo abbiamo bisogno di un altro tipo di linea di tendenza.

Linee di tendenza esponenziale

Se i tuoi dati sono spiegati al meglio da un valore esponenziale del modulo eax+b, puoi utilizzare l'attributo type per specificare una linea di tendenza esponenziale, come mostrato di seguito:

Nota: a differenza delle linee di tendenza lineari, esistono diversi modi per calcolare le linee di tendenza esponenziali. Al momento viene fornito un solo metodo, ma ne verrà supportato altri in futuro; pertanto, è possibile che il nome o il comportamento della linea di tendenza esponenziale corrente cambino.

Per questo grafico, utilizziamo visibleInLegend: true anche per visualizzare la curva esponenziale nella legenda.

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Generation', 'Descendants'],
    [0, 1], [1, 33], [2, 269], [3, 2013]
 ]);

  var options = {
    title: 'Descendants by Generation',
    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
    trendlines: {
      0: {
        type: 'exponential',
        visibleInLegend: true,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

Modificare il colore

Per impostazione predefinita, le linee di tendenza sono colorate come le serie di dati, ma sono più chiare. Puoi sostituire questa impostazione con l'attributo color. Qui, indichiamo quante cifre di pi greco sono state calcolate per anno durante un periodo computazionale, colorando la verde di tendenza esponenziale.

Ecco la specifica delle linee di tendenza:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Linee di tendenza polinomiali

Per generare una linea di tendenza polinomiale, specifica polynomial e degree. Utilizzali con cautela, perché a volte possono portare a risultati fuorvianti. Nell'esempio seguente, in cui un set di dati approssimativamente lineare è tracciato con una linea di tendenza cubica (grado 3):

Tieni presente che il piombo dopo l'ultimo punto dati è visibile solo perché abbiamo esteso artificialmente l'asse orizzontale a 15. Senza l'impostazione di hAxis.maxValue su 15, avrebbe il seguente aspetto:

Stessi dati, stesso polinomio, finestra diversa sui dati.

Opzioni
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
HTML completo
<html>
 <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load("current", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Age', 'Weight'],
         [ 8,      12],
         [ 4,      5.5],
         [ 11,     14],
         [ 4,      5],
         [ 3,      3.5],
         [ 6.5,    7]
       ]);

       var options = {
         title: 'Age vs. Weight comparison',
         legend: 'none',
         crosshair: { trigger: 'both', orientation: 'both' },
         trendlines: {
           0: {
             type: 'polynomial',
             degree: 3,
             visibleInLegend: true,
           }
         }
       };

       var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
 </body>
</html>

Modificare l'opacità e la larghezza delle linee

Puoi modificare la trasparenza della linea di tendenza impostando opacity su un valore compreso tra 0,0 e 1,0 e la larghezza della riga impostando l'opzione lineWidth.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

L'opzione lineWidth sarà sufficiente per la maggior parte degli utilizzi, ma se ti piace il look è disponibile un'opzione pointSize che può essere utilizzata per personalizzare le dimensioni dei punti selezionabili all'interno della linea di tendenza:

Proprio come la luce è sia un'onda sia una particella, una linea di tendenza è sia una linea che un insieme di punti. I dati visualizzati dagli utenti dipendono da come vi interagiscono: di solito una riga, ma quando si passa il mouse sulla linea di tendenza viene evidenziato un determinato punto. Il diametro del punto sarà pari a:

  • la linea di tendenza pointSize se definita, altrimenti...
  • pointSize a livello globale, se definito, altrimenti...
  • 7

Tuttavia, se imposti l'opzione globale o l'opzione pointSizedi tendenza, verranno mostrati tutti i punti selezionabili, indipendentemente dall'lineWidth di riferimento.

Opzioni
  var options = {
    legend: 'none',
    hAxis: { ticks: [] },
    vAxis: { ticks: [] },
    pointShape: 'diamond',
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
        pointSize: 20, // Set the size of the trendline dots.
	opacity: 0.1
      }
    }
  };
HTML completo
<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y'],
          [0, 4],
          [1, 2],
          [2, 4],
          [3, 6],
          [4, 4]
        ]);

        var options = {
          legend: 'none',
          hAxis: { ticks: [] },
          vAxis: { ticks: [] },
          colors: ['#703583'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20, // Set the size of the trendline dots.
              opacity: 0.1
            }
          }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Rendere visibili i punti

Le linee di tendenza vengono costituite stampando un gruppo di punti sul grafico. L'opzione pointsVisible della linea di tendenza determina se i punti di una determinata linea di tendenza sono visibili. L'opzione predefinita per tutte le linee di tendenza è true, ma se vuoi disattivare la visibilità dei punti per la prima linea di tendenza, imposta trendlines.0.pointsVisible: false.

Il grafico di seguito mostra come controllare la visibilità dei punti in base alla tendenza.

Opzioni
        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };
    
HTML completo
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y', 'Z'],
          [0, 4, 5],
          [1, 2, 6],
          [2, 4, 8],
          [3, 6, 10],
          [4, 4, 11],
          [5, 8, 13],
          [6, 12, 15],
          [7, 15, 19],
          [8, 25, 21],
          [9, 34, 23],
          [10, 50, 27]
        ]);

        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

    

Modificare l'etichetta

Per impostazione predefinita, se selezioni visibleInLegend, l'etichetta rivela l'equazione della linea di tendenza. Puoi utilizzare labelInLegend per specificare un'etichetta diversa. Qui, mostriamo una linea di tendenza per ciascuna delle due serie, impostando le etichette nella coda su "Riga dei bug" (per la serie 0) e "Linea di test" (serie 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Correlazioni

Il coefficiente di determinazione, chiamato R2 nelle statistiche, identifica il grado di corrispondenza tra una linea di tendenza e i dati. Una correlazione perfetta è 1,0 e un anticorruzione perfetto è 0,0.

Puoi rappresentare R2 nella legenda del grafico impostando l'opzione showR2 su true.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          hAxis: {minValue: 0, maxValue: 15},
          vAxis: {minValue: 0, maxValue: 15},
          chartArea: {width:'50%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

        options.trendlines[0].type = 'exponential';
        options.colors = ['#6F9654'];

        var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
        chartExponential.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chartLinear" style="height: 350px; width: 800px"></div>
    <div id="chartExponential" style="height: 350px; width: 800px"></div>
  </body>
</html>