Panoramica
Un grafico delle differenze è un grafico progettato per evidenziare le differenze tra due grafici con dati confrontabili. Mettendo in evidenza i cambiamenti tra valori analoghi, possono rivelare variazioni tra i set di dati.
Puoi creare un grafico delle differenze chiamando il metodo computeDiff con due set di dati per generare un terzo set di dati che rappresenti il diff. e poi disegnandolo.
I grafici Diff sono disponibili per grafici a barre, grafici a colonne, grafici a torta e grafici a dispersione.
Esempi
In questa sezione potrai vedere esempi ed esempi di codice per ogni tipo di grafico delle differenze.
Grafici a dispersione delle differenze
Per dimostrare il grafico a dispersione, prendiamo in considerazione un paio di esperimenti, ognuno dei quali confronta due farmaci. Ecco i risultati dei due esperimenti e il grafico delle differenze risultante:
Se noti queste due classifiche, puoi capire che qualcosa è cambiato, ma è difficile dire esattamente cosa. Il grafico a dispersione delle differenze chiarisce la situazione mostrando la traiettoria di ciascun punto dati.
Di seguito sono riportate le linee chiave che generano i tre grafici sopra:
// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));
// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);
// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);
Puoi modificare l'opacità delle code con l'opzione diff.oldData.opacity e l'opacità dei nuovi punti dati con l'opzione diff.newData.opacity:
Grafici a torta
Ecco il codice per generare tutti e tre i grafici:
<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 oldData = google.visualization.arrayToDataTable([
['Major', 'Degrees'],
['Business', 256070], ['Education', 108034],
['Social Sciences & History', 127101], ['Health', 81863],
['Psychology', 74194]]);
var newData = google.visualization.arrayToDataTable([
['Major', 'Degrees'],
['Business', 358293], ['Education', 101265],
['Social Sciences & History', 172780], ['Health', 129634],
['Psychology', 97216]]);
var options = { pieSliceText: 'none' };
var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));
chartBefore.draw(oldData, options);
chartAfter.draw(newData, options);
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData, options);
}
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>
Puoi controllare la dimensione relativa dei cerchi con diff.innerCircle.radiusFactor, il bordo tra i due con diff.innerCircle.borderFactor e la trasparenza di ciascuno con diff.oldData.opacity e diff.newData.opacity. Infine, puoi invertire il comportamento in modo che i dati meno recenti circondano i dati più recenti con diff.oldData.inCenter. Un esempio di ciascuno:
Grafici a colonne e a barre differenziali
I grafici a colonne e le colonne delle differenze sovrappongono i dati più recenti ai dati meno recenti. Qui prendiamo due semplici grafici a colonne, uno dei vecchi dati, uno dei nuovi, e li distribuiamo:
Per un esempio più complesso, diamo un'occhiata a come la popolarità di alcuni nomi (in particolare i nomi degli stagisti estivi di visualizzazione Google) è cambiata dagli anni '80 a oggi (i numeri sono per milione di bambini, per gentile concessione del Bambino Nome "Wizard").
Il codice per generare tutti e quattro i grafici:
<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 oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 250],
['Rachel', 4200],
['Patrick', 2900],
['Eric', 8200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 370],
['Rachel', 600],
['Patrick', 700],
['Eric', 1500]
]);
var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));
var options = { legend: { position: 'top' } };
colChartBefore.draw(oldData, options);
colChartAfter.draw(newData, options);
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
barChartDiff.draw(diffData, options);
}
</script>
<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
I grafici a colonne e le colonne delle differenze ti consentono di controllare la larghezza relativa della vecchia e della nuova barra con l'opzione diff.newData.widthFactor: