Wykresy różnicowe

Omówienie

Wykres różnicowy to wykres mający pokazywać różnice między 2 wykresami z porównywalnymi danymi. Wyróżniając zmiany między analogicznymi wartościami, można ujawnić różnice między zbiorami danych.

Wykres różnicowy tworzysz, wywołując metodę computeDiff z 2 zbiorami danych w celu wygenerowania trzeciego zbioru danych reprezentującego różnice, a następnie rysując go.

Wykresy różnicowe są dostępne w przypadku wykresów słupkowych, wykresów kolumnowych, wykresów kołowych i wykresów punktowych.

Przykłady

W tej sekcji znajdziesz przykłady i przykłady kodu dla każdego typu wykresu różnicowego.

Wykresy punktowe różnicowe

Aby zademonstrować wykres punktowy różnic, przyjrzyjmy się 2 eksperymentom, z których każdy porównuje 2 leki. Oto wyniki obu eksperymentów oraz wynikowy wykres różnic:

Jeśli spojrzysz na te dwa wykresy, zauważysz, że coś się zmieniło, ale ciężko stwierdzić, co dokładnie. Na wykresie rozproszonym różnic jest to jasne, ponieważ pokazuje trajektorię każdego punktu danych.

Oto najważniejsze wiersze, które generują te 3 wykresy:

// 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);

Przezroczystość stron możesz zmienić za pomocą opcji diff.oldData.opacity, a przezroczystość nowych punktów danych – za pomocą opcji diff.newData.opacity:

Różnice w wykresach kołowych

Oto kod generujący wszystkie 3 wykresy:

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

Możesz kontrolować względny rozmiar okręgów za pomocą właściwości diff.innerCircle.radiusFactor, obramowanie między nimi za pomocą parametru diff.innerCircle.borderFactor oraz przezroczystość każdego z nich za pomocą parametrów diff.oldData.opacity i diff.newData.opacity. Na koniec możesz odwrócić działanie, aby najstarsze dane otaczały najnowsze dane w elemencie diff.oldData.inCenter. Oto przykłady:

Wykresy słupkowe i kolumnowe

Wykresy różnicowe i kolumnowe nakładają nowsze dane na starsze. Zapisujemy dwa proste wykresy kolumnowe – jeden ze starych danych i jeden z nowych – i je porównujemy:

W bardziej złożonym przykładzie przyjrzyjmy się, jak popularność niektórych imion (w szczególności letnich stażystów Google Wizualizacji) zmieniła się z lat 80. na teraźniejszość (wartości są podane na miliony dzieci, dzięki uprzejmości Baby NameWizard).

Kod do generowania wszystkich 4 wykresów:

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

Wykresy kolumnowe i słupkowe z różnicami umożliwiają kontrolowanie względnej szerokości starych i nowych słupków za pomocą opcji diff.newData.widthFactor: