Fark Listeleri

Genel bakış

Fark grafiği, benzer verilere sahip iki grafik arasındaki farkları vurgulamak için tasarlanmıştır. Benzer değerler arasındaki değişiklikleri ön plana çıkararak veri kümeleri arasındaki farkları ortaya çıkarabilirler.

Farkı temsil eden üçüncü bir veri kümesi oluşturmak için computeDiff yöntemini iki veri kümesi ile çağrıp daha sonra bunu çizerek bir fark grafiği oluşturursunuz.

Fark grafikleri; çubuk grafikler, sütun grafikleri, pasta grafikler ve dağılım grafikleri için kullanılabilir.

Örnekler

Bu bölümde, her fark grafik türü için örnekler ve kod örnekleri göreceksiniz.

Dağılım Grafikleri

Fark dağılımı grafiğini göstermek için her biri iki ilacı karşılaştıran bir çift denemeyi ele alalım. İki denemeden elde edilen sonuçlar ve ortaya çıkan fark grafiği:

Bu iki grafik hakkında kafa yorarsanız bir şeylerin değiştiğini anlayabilirsiniz, ancak tam olarak ne olduğunu söylemek zor. Dağılım grafiği, her bir veri noktasının yörüngesini göstererek bunu netleştirir.

Yukarıdaki üç grafiği oluşturan ana hatlar şunlardır:

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

Kuyrukların opaklığını diff.oldData.opacity seçeneğiyle, yeni veri noktalarının opaklığını diff.newData.opacity seçeneğiyle değiştirebilirsiniz:

Diff Pasta Grafikler

Üç grafiğin tamamını oluşturmak için kodu aşağıda bulabilirsiniz:

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

Dairelerin göreceli boyutunu diff.innerCircle.radiusFactor, ikisi arasındaki kenar diff.innerCircle.borderFactor ile ve her birinin şeffaflık düzeyini diff.oldData.opacity ve diff.newData.opacity ile kontrol edebilirsiniz. Son olarak, davranışı en ters haline döndürerek en eski verilerin diff.oldData.inCenter ile çevrelenmesini sağlayabilirsiniz. Her birinin örneği:

Fark Çubuğu ve Sütun Grafikleri

Fark çubuğu ve fark sütunu grafikleri, eski verilerin üzerine yeni verileri yerleştirir. Burada, biri basit diğeri yeni olmak üzere iki basit sütun grafiği alıp bunları birbirinden ayırıyoruz:

Daha karmaşık bir örnek vermek gerekirse, bazı adları (özellikle Google Görselleştirme yaz stajyerlerinin adlarını) 1980'lerden günümüze nasıl değiştirdiğimize bakalım (Baby Name Wizard'ın desteğiyle milyonlarca bebek başına olan numara).

Dört grafiğin tümünü oluşturacak kod:

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

Fark sütunu ve çubuk grafikler, diff.newData.widthFactor seçeneğiyle eski ve yeni çubukların göreli genişliğini kontrol etmenizi sağlar: