Panoramica
Una
Google grafici supporta tre tipi di linee di tendenza: lineare, polinomiale ed esponenziale.
Linee di tendenza lineari
Una linea di tendenza
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
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.
var options = { title: 'Age vs. Weight comparison', legend: 'none', crosshair: { trigger: "both", orientation: "both" }, trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: 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 = { 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 pointSize
di tendenza, verranno mostrati tutti i punti selezionabili, indipendentemente dall'lineWidth
di riferimento.
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> <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.
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> <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>