Übersicht
Ein Differenzdiagramm ist ein Diagramm, das die Unterschiede zwischen zwei Diagrammen mit vergleichbaren Daten hervorheben soll. Indem sie die Änderungen zwischen analogen Werten deutlich machen, können Abweichungen zwischen Datasets aufgedeckt werden.
Zum Erstellen eines Diff-Diagramms rufen Sie die Methode computeDiff mit zwei Datasets auf, um ein drittes Dataset zu generieren, das den Unterschied darstellt, und zeichnen dieses dann.
Differenzdiagramme sind für Balkendiagramme, Säulendiagramme, Kreisdiagramme und Streudiagramme verfügbar.
Beispiele
In diesem Abschnitt finden Sie Beispiele und Codebeispiele für jeden Diff-Diagrammtyp.
Differenz-Streudiagramme
Betrachten wir zur Veranschaulichung des Streudiagramms zwei Tests, in denen jeweils zwei Medikamente verglichen werden. Hier sehen Sie die Ergebnisse der beiden Tests und das daraus resultierende Differenzdiagramm:
Wenn Sie diese beiden Diagramme betrachten, können Sie feststellen, dass sich etwas geändert hat. Es ist jedoch schwierig, genau zu sagen, was sich geändert hat. Das Diff-Streudiagramm verdeutlicht dies, indem es die Laufbahn jedes Datenpunkts zeigt.
Hier sind die wichtigsten Linien für die drei obigen Diagramme:
// 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);
Sie können die Deckkraft der Seiten mit der Option diff.oldData.opacity und die Deckkraft der neuen Datenpunkte mit der Option diff.newData.opacity ändern:
Differenz-Kreisdiagramme
Hier ist der Code zum Generieren aller drei Diagramme:
<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>
Die relative Größe der Kreise lässt sich mit diff.innerCircle.radiusFactor, die Grenze zwischen den beiden mit diff.innerCircle.borderFactor und die Transparenz jedes Kreises mit diff.oldData.opacity und diff.newData.opacity festlegen. Schließlich können Sie das Verhalten umkehren, sodass die ältesten Daten die neuesten Daten mit diff.oldData.inCenter umgeben. Beispiele:
Dif-Balken- und Säulendiagramme
Die Diagramme mit den Unterschiedsbalken und den Unterschiedsspalten blenden neuere Daten über ältere Daten ein. Hier nehmen wir zwei einfache Säulendiagramme – eines mit alten Daten und eines mit neuen – und unterscheiden sie:
Für ein etwas komplexeres Beispiel sehen wir uns an, wie sich die Beliebtheit einiger Namen (insbesondere die Namen von Sommerinternats in der Google-Visualisierung) von den 1980er-Jahren bis heute verändert hat. Die Zahlen entsprechen je einer Million Babys, mit freundlicher Genehmigung des Baby Name Wizard.
Der Code zum Generieren aller vier Diagramme:
<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>
Mit den Spalten- und Balkendiagrammen für den Unterschied können Sie die relative Breite des alten und des neuen Balkens mit der Option diff.newData.widthFactor steuern: