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
: