Diff-Diagramme

Übersicht

Ein Diff-Diagramm ist ein Diagramm, in dem die Unterschiede zwischen zwei Diagrammen mit vergleichbaren Daten hervorgehoben werden. Wenn Sie die Änderungen zwischen analogen Werten hervorheben, können sie Unterschiede zwischen Datasets erkennen.

Zum Erstellen eines Diff-Diagramms rufen Sie die Methode computeDiff mit zwei Datasets auf, um ein drittes Dataset zu generieren, das den Diff-Wert darstellt, und zeichnen diese dann.

Diff-Diagramme sind für Balkendiagramme, Spaltendiagramme, Kreisdiagramme und Streudiagramme verfügbar.

Beispiele

In diesem Abschnitt finden Sie Beispiele und Codebeispiele für jeden Diagrammtyp.

Diffusionsdiagramme

Betrachten wir zur Veranschaulichung des Streudiagramms zwei verschiedene Tests, in denen jeweils zwei Medikamente miteinander verglichen werden. Hier sehen Sie die Ergebnisse der beiden Tests und das entsprechende Diff-Diagramm:

Wenn Sie diese beiden Diagramme im Auge behalten, können Sie zwar feststellen, dass sich etwas geändert hat, aber nicht genau wissen, was genau ist. Das Diff-Streudiagramm zeigt den Verlauf der einzelnen Datenpunkte.

Dies sind die wichtigsten Zeilen, die die drei obigen Diagramme generieren:

// 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 Tails mit der Option diff.oldData.opacity und die Deckkraft der neuen Datenpunkte mit der Option diff.newData.opacity ändern:

Diff-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>

Sie können die relative Größe der Kreise mit diff.innerCircle.radiusFactor, den Rahmen zwischen den beiden mit diff.innerCircle.borderFactor und die Transparenz jedes Kreises mit diff.oldData.opacity und diff.newData.opacity steuern. Schließlich können Sie das Verhalten umkehren, sodass die ältesten Daten in den ältesten Daten mit diff.oldData.inCenter umgeben sind. Hier ein Beispiel:

Differente und Säulendiagramme

Die Unterschiede in Balken- und Diff-Spaltendiagrammen überlagern neuere Daten über älteren Daten. Hier vergleichen wir zwei einfache Säulendiagramme – eines mit alten und eines mit neuen – und heben sie auf:

Ein komplizierteres Beispiel: Sehen wir uns an, wie sich die Beliebtheit einiger Namen (insbesondere der Namen von Google-Praktikern im Sommer) von den 1980er-Jahren bis heute verändert hat. Die Zahlen basieren auf Millionen von 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 Unterschiedsspalten und Balkendiagrammen können Sie die relative Breite des alten und des neuen Balkens mit der Option diff.newData.widthFactor festlegen: