DataTables ve DataView'lar

Bu sayfada, grafikler tarafından kullanılan dahili veri temsili, bir grafiğe veri aktarmak için kullanılan DataTable ve DataView sınıfları, ayrıca DataTable öğesini doldurma ve doldurmanın çeşitli yolları açıklanmaktadır.

İçindekiler

  1. Grafikte Veriler Nasıl Temsil Edilir?
  2. Grafiğim Hangi Tablo Şemasını Kullanıyor?
  3. DataTables ve DataViews
  4. Veri Tablosu Oluşturma ve Doldurma
    1. Yeni bir DataTable oluşturun, ardından addColumn()/addRows()/addRow()/setcell() çağrısı yapın
    2. diziToDataTable()
    3. JavaScript değişmez başlatıcısı
    4. Veri Kaynağı Sorgusu Gönderme
  5. dataTableToCsv()
  6. Daha Fazla Bilgi

Grafikte Veriler Nasıl Temsil Edilir?

Tüm grafikler, verilerini bir tabloda depolar. Aşağıda, iki sütunlu doldurulmuş bir veri tablosunun basitleştirilmiş bir temsili verilmiştir:

index: 0
type: string
label: "Görev"

dizin: 1
tür: sayı
etiket: "Saat başına"
"İş" 11
"Yeme" 2
"İşe Gidip Gelme" 2
"TV'yi İzle" 2
"Uyku" 7

Veriler (satır, sütun) olarak başvurulan hücrelerde depolanır. Burada satır sıfır tabanlı bir satır dizini, sütun ise sıfıra dayalı bir sütun dizini veya benzersiz bir kimlik olabilir.

Tablonun desteklenen öğelerinin ve özelliklerinin daha kapsamlı bir listesini aşağıda bulabilirsiniz. Daha fazla ayrıntı için Oluşturucunun JavaScript Değişmez Parametresinin Biçimi bölümüne bakın:

  • Tablo: Bir sütun ve satır dizisi ve atayabileceğiniz isteğe bağlı ad/değer çiftleri haritası. Tablo düzeyindeki özellikler şu anda grafikler tarafından kullanılmamaktadır.
  • Sütunlar: Her sütun zorunlu bir veri türünün yanı sıra isteğe bağlı dize etiketi, kimlik, desen ve rastgele ad/değer özelliklerinin haritasını destekler. Etiket, grafik tarafından görüntülenebilen, kullanıcı dostu bir dizedir. Kimlik, bir sütun dizininin yerine kullanılabilecek isteğe bağlı bir tanımlayıcıdır. Bir sütun, sıfır tabanlı dizin veya isteğe bağlı kimlik ile kod içinde belirtilebilir. Desteklenen veri türlerinin listesi için DataTable.addColumn() başlıklı makaleye bakın.
  • Satırlar: Bir satır dizisi, atayabileceğiniz rastgele ad/değer çiftleri isteğe bağlı bir haritasıdır.
  • Hücreler: Her hücre, sütun türünün gerçek değerini ve sağladığınız değerin isteğe bağlı dize biçimini içeren bir nesnedir. Örneğin, sayısal bir sütuna 7 değeri ve biçimlendirilmiş "yedi" değeri atanabilir. Biçimlendirilmiş bir değer sağlanmışsa grafik ve hesaplamalar için gerçek değer kullanılır ancak uygun olan durumlarda (ör. kullanıcı bir noktanın üzerine geldiğinde) biçimlendirilmiş değer gösterilebilir. Her hücrede isteğe bağlı olarak rastgele ad/değer çiftleri eşlemesi bulunur.

Grafiğim Hangi Tablo Şemasını Kullanıyor?

Farklı grafikler farklı biçimlerde tablolar kullanır: Örneğin, bir pasta grafik, bir dize sütunu ve bir sayı sütunu içeren iki sütunlu bir tablo bekler. Burada her satır bir dilimi, ilk sütun ise dilim etiketini, ikinci sütun ise dilim değerini belirtir. Bununla birlikte, dağılım grafiği, her satırın bir nokta, iki sütunun ise noktanın X ve Y değerleri olduğu iki sayısal sütundan oluşan bir tablo olmasını bekler. Hangi veri biçimini gerektirdiğini öğrenmek için grafiğinizin dokümanlarını okuyun.

DataTables ve DataView'lar

Grafik veri tablosu, JavaScript'te bir DataTable nesnesi veya bir DataView nesnesiyle temsil edilir. Bazı durumlarda, örneğin bir Grafik Araçları Veri Kaynağı tarafından internet üzerinden gönderilen ya da bir ChartWrapper için olası giriş değeri olarak kullanılan bir DataTable'ın JavaScript değişmez veya JSON sürümünü görebilirsiniz.

Orijinal veri tablosunu oluşturmak için DataTable kullanılır. DataView, bağlı veya orijinal verileri değiştirmeden satır veya sütunları hızlı bir şekilde gizleme ya da yeniden sıralama yöntemleriyle, DataTable öğesinin salt okunur görünümünü sağlayan bir rahatlık sınıfıdır. Aşağıda iki sınıfın kısa bir karşılaştırması verilmiştir:

Veri Tablosu Veri görünümü
Okuma/Yazma Salt okuma
Boş oluşturulabilir ve ardından doldurulabilir Mevcut bir DataTable referansıdır. Sıfırdan doldurulamaz. Mevcut bir DataTable referansıyla örneklendirilmelidir.
Veriler depolama alanını kullanır. Veriler mevcut bir DataTable referansıdır ve yer kaplamaz.
Satır, sütun ve veri ekleyebilir/düzenleyebilir/silebilir ve tüm değişiklikler kalıcıdır. Temel verileri değiştirmeden satırları sıralayabilir veya filtreleyebilir. Satırlar ve sütunlar tekrar tekrar gizlenebilir ve gösterilebilir.
Klonlanabilir Görünümün DataTable sürümünü döndürebilir
Kaynak veridir; referans içermez DataTable için canlı referans; DataTable verilerinde yapılan tüm değişiklikler görünüme hemen yansıtılır.
Grafike veri kaynağı olarak aktarılabilir Grafike veri kaynağı olarak aktarılabilir
Hesaplanmış sütunları desteklemez Hesaplanmış sütunları destekler. Bunlar, diğer sütunları birleştirerek veya manipüle ederek bir anda hesaplanan değere sahip sütunlardır.
Satır veya sütun gizlenmiyor Seçili sütunları gizleyebilir veya gösterebilir

Veri Tablosu oluşturma ve doldurma

Veri tablosu oluşturup doldurmanın birkaç yolu vardır:

Boş DataTable + addColumn()/addRows()/addRow()/setCell()

Adımlar:

  1. Yeni bir DataTable örneği oluşturun
  2. Sütun ekleyin
  3. İsteğe bağlı olarak verilerle doldurulan bir veya daha fazla satır ekleyin. Boş satırlar ekleyebilir ve bunları daha sonra doldurabilirsiniz. Ayrıca, satırlara satır ekleyebilir, mevcut satırları kaldırabilir veya hücre değerlerini ayrı ayrı düzenleyebilirsiniz.

Avantajları:

  • Her sütunun veri türünü ve etiketini belirtebilirsiniz.
  • Tarayıcıda tablo oluşturmak için uygundur ve JSON değişmez yönteminden daha az yazım hatası içerir.

Dezavantajları:

  • Sayfayı bir web sunucusunda programatik olarak oluştururken DataTable oluşturucuya iletilecek JSON sabit dizesi oluşturmak kadar yararlı değildir.
  • Tarayıcının hızına bağlıdır ve daha büyük tabloların (yaklaşık 1000 hücre) bulunduğu JSON değişmez dizelerinden daha yavaş olabilir.

Örnekler:

Aşağıda, bu tekniğin farklı varyasyonlarını kullanarak aynı veri tablosunu oluşturmaya yönelik birkaç örnek verilmiştir:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

diziToDataTable()

Bu yardımcı işlev tek bir çağrı kullanarak bir DataTable oluşturur ve doldurur.

Avantajları:

  • Tarayıcıda yürütülen çok basit ve okunabilir kod.
  • Her sütunun veri türünü açıkça belirtebilirsiniz veya Google Listeler, türü iletilen verilere göre tahmin edebilir.
    • Bir sütunun veri türünü açıkça belirtmek için başlık özelliğinde type özelliğini kullanarak bir nesne belirtin.
    • Google Listeler'in türü tahmin etmesine izin vermek için sütun etiketine ilişkin bir dize kullanın.

Örnekler:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.

var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

JavaScript Değişmez Başlatıcı

Tablo şemanızı ve isteğe bağlı olarak verileri de tanımlayarak tablo oluşturucunuza bir JavaScript değişmez nesnesi geçirebilirsiniz.

Avantajları:

  • Web sunucunuzda veri oluştururken kullanışlıdır.
  • Daha büyük tablolar için diğer yöntemlerden daha hızlı çalışır (yaklaşık 1.000 hücre)

Dezavantajları:

  • Söz dizimi doğru yapmak zordur ve yazım hataları yapılabilir.
  • Okunamayan bir kod.
  • JSON'a benzer ancak aynı değildir.

Örnek:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Veri Kaynağı Sorgusu Gönderme

Grafik Araçları Veri Kaynağı'na bir sorgu gönderdiğinizde, başarılı bir yanıt DataTable örneğidir. Döndürülen bu DataTable, diğer herhangi bir DataTable ile aynı şekilde bir DataView'a kopyalanabilir, değiştirilebilir veya kopyalanabilir.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

Yardımcı işlev google.visualization.dataTableToCsv(verileri), veri tablosundaki verileri içeren bir CSV dizesi döndürür.

Bu işlevin girişi bir DataTable veya DataView olabilir.

Hücrelerin biçimlendirilmiş değerlerini kullanır. Sütun sütunları yok sayılır.

"," ve "\n" gibi özel karakterler, standart CSV çıkış kuralları kullanılarak kod dışına alınır.

Aşağıdaki kod, tarayıcınızın JavaScript konsolunda

Ramanujan,1729
Gauss,5050


görüntülenir:

<html>
  <head>
  <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 data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

Daha Fazla Bilgi