Wykresy różne

Omówienie

Wykres różnicowy to wykres, który wskazuje różnice między 2 wykresami z porównywalnymi danymi. Wyróżniając analogiczne wartości, można wykryć różnice między zbiorami danych.

Aby utworzyć wykres różnicy, wywołaj metodę computeDiff z 2 zbiorami danych, aby wygenerować trzeci zbiór danych reprezentujący różnicę, a następnie ją narysowaj.

Różne wykresy są dostępne w przypadku wykresów słupkowych, kolumnowych, wykresów kołowych i punktowych.

Przykłady

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

Wykresy rozproszone

Aby pokazać wykres rozproszony punktowy, przyjrzyjmy się dwóm eksperymentom, z których każdy porównuje 2 leki. Oto wyniki z obu eksperymentów i wynikający z nich wykres różnic:

Gdy spojrzysz na te dwa wykresy, zauważysz, że coś się zmieniło, ale ciężko jest stwierdzić, co dokładnie się zmieniło. Wykres rozproszony jest bardziej zrozumiały, ponieważ pokazuje trajektorię każdego punktu danych.

Oto najistotniejsze 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ść ogonów możesz zmienić za pomocą opcji diff.oldData.opacity, a przezroczystość nowych punktów danych za pomocą opcji diff.newData.opacity:

Wykresy kołowe różnych

Oto kod, który pozwala wygenerować 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ą diff.innerCircle.radiusFactor, obramowanie między nimi za pomocą diff.innerCircle.borderFactor i przezroczystość każdego z nich za pomocą diff.oldData.opacity i diff.newData.opacity. Na koniec możesz odwrócić to zachowanie, tak aby najstarsze dane otaczające najnowsze dane wartością diff.oldData.inCenter. Przykład każdego:

Wykresy słupkowe i kolumnowe

Wykresy kolumn różnic i kolumn różnic nakładają się na nowsze dane. Bierzemy pod uwagę dwa proste wykresy kolumnowe – jeden ze starymi danymi, a drugi – różnią się od siebie:

Bardziej złożony przykład: zobaczmy, jak popularność niektórych imion, a zwłaszcza ich letnich stażystów, zmieniła się od lat 80. XX wieku do chwili obecnej. Liczby pochodzą od milionów dzieci dzięki uprzejmości Baby Name Wizard.

Kod generujący wszystkie 4 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([
      ['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>

Kolumna kolumn różnicy i wykresy słupkowe umożliwiają kontrolowanie względnej szerokości starych i nowych słupków za pomocą opcji diff.newData.widthFactor: