Panoramica
Un grafico delle differenze è un grafico progettato per evidenziare le differenze tra due grafici con dati paragonabili. Mettendo in evidenza le modifiche tra valori analoghi, possono evidenziare 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 rappresenta le
differenze, quindi disegnandolo.
Sono disponibili grafici delle differenze per grafici a barre, grafici a colonne, grafici a torta e grafici a dispersione.
Esempi
In questa sezione sono riportati esempi ed esempi di codice per ogni tipo di grafico delle differenze.
Grafici a dispersione delle differenze
Per dimostrare il grafico a dispersione delle differenze, consideriamo un paio di esperimenti, ognuno dei quali mette a confronto due farmaci. Di seguito sono riportati i risultati dei due esperimenti e il grafico delle differenze risultante:
Osservando questi due grafici, puoi vedere che qualcosa è cambiato, ma è difficile dire esattamente cosa. Il grafico a dispersione delle differenze rende evidente la differenza 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 differenziale
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 racchiudano quelli più recenti a diff.oldData.inCenter. Un esempio di ognuno:
Grafici a barre e colonne delle differenze
La barra delle differenze e i grafici a colonne delle differenze sovrappongono ai dati più recenti i dati più recenti. Qui prendiamo due semplici grafici a colonne (uno con dati precedenti e uno nuovo) e li confrontiamo:
Per un esempio più complicato, vediamo come la popolarità di alcuni nomi (in particolare i nomi degli stagisti estivi della visualizzazione Google) è cambiata dagli anni'80 a oggi (i numeri sono per milione di neonati, per gentile concessione del nome del neonato).
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 barre e a colonne delle differenze consentono di controllare la larghezza relativa delle barre vecchie e nuove con l'opzione diff.newData.widthFactor: