DataTables ve DataView'lar

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

İçindekiler

  1. Bir grafikte veriler nasıl temsil edilir?
  2. Şemamda Hangi Tablo Şeması Kullanılır?
  3. DataTables ve DataViews
  4. Veri Tablosu Oluşturma ve Doldurma
    1. Yeni bir DataTable oluşturup addColumn()/addRows()/addRow()/setCell() çağrısı yapın
    2. arrayToDataTable()
    3. JavaScript değişmez değeri başlatıcı
    4. Veri Kaynağı Sorgusu Gönderme
  5. dataTableToCsv()
  6. Daha Fazla Bilgi

Bir Grafikte Veriler Nasıl Temsil Edilir?

Tüm grafiklerin verilerini bir tabloda depolar. Aşağıda, iki sütunlu doldurulan veri tablosunun basitleştirilmiş bir gösterimi verilmiştir:

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

 dizin: 1
type: number
label: "Saat/Gün"
"İş" 11
"Yeme" 2
"İşe gidip gelme" 2
"TV izleme" 2
"Uyku" 7

Veriler (satır, sütun) başvuruda bulunulan hücrelerde depolanır. Burada satır, sıfır tabanlı bir satır dizinidir ve sütun, sıfır tabanlı bir sütun dizini veya belirtebileceğiniz benzersiz bir kimliktir.

Tablonun desteklenen öğelerinin ve özelliklerinin daha kapsamlı bir listesini burada bulabilirsiniz. Daha ayrıntılı bilgi için Oluşturucunun JavaScript Değişmez Parametresi Biçimi konusuna bakın:

  • Tablo: Bir sütun ve satır dizisi ve atayabileceğiniz rastgele ad/değer çiftlerinin isteğe bağlı bir haritası. Tablo düzeyindeki özellikler şu anda grafikler tarafından kullanılmamaktadır.
  • Sütunlar: Her sütun, gerekli bir veri türünün yanı sıra isteğe bağlı dize etiketini, kimliği, kalıbı ve rastgele ad/değer özelliklerinin haritasını destekler. Etiket, grafik tarafından görüntülenebilecek kullanıcı dostu bir dizedir. Kimlik, sütun dizini yerine kullanılabilecek isteğe bağlı bir tanımlayıcıdır. Bir sütun, kod içinde sıfır tabanlı dizin veya isteğe bağlı kimlik ile bulunabilir. Desteklenen veri türlerinin listesi için DataTable.addColumn() sayfasına bakın.
  • Satırlar: Satır, bir hücre dizisi ve atayabileceğiniz rastgele ad/değer çiftlerinin 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çimli bir sürümünü içeren bir nesnedir. Örneğin, 7 değeri sayısal bir sütuna ve "yedi" biçimlendirilmiş değeri de "yedi" olarak atanabilir. Biçimlendirilmiş bir değer sağlanırsa grafikte hesaplamalar ve oluşturma işlemleri için gerçek değer kullanılır. Ancak uygun durumlarda (örneğin, kullanıcı fareyle bir noktanın üzerine gelirse) biçimlendirilmiş değer gösterilebilir. Ayrıca her hücrede, rastgele ad/değer çiftlerinden oluşan isteğe bağlı bir eşleme de bulunur.

Grafikte Hangi Tablo Şeması Kullanılır?

Farklı grafiklerde farklı biçimlerde tablolar kullanılır: Örneğin, pasta grafiklerde her birinin bir dilimi açıkladığı, ilk sütun, dilim etiketi ve ikinci sütun dilim değeri içeren iki sütunlu bir tablo bekler. Ancak dağılım grafiği, her satırın bir nokta, iki sütunun da noktanın X ve Y değerleri olduğu iki sayısal sütundan oluşan bir tablo bekler. Hangi veri biçimini gerektirdiğini öğrenmek için grafiğinizin dokümanlarını okuyun.

DataTables ve DataViews

Grafik veri tablosu, JavaScript'te bir DataTable nesnesi veya DataView nesnesiyle temsil edilir. Bazı durumlarda, örneğin verilerin bir Chart Tools veri kaynağı tarafından internet üzerinden gönderilmesi veya bir ChartWrapper için olası bir giriş değeri olarak DataTable'ın JavaScript değişmez değerinin veya JSON sürümünün kullanıldığını görebilirsiniz.

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

DataTable DataView
Okuma/Yazma Salt okunur
Boşta oluşturulup daha sonra doldurulabilir Mevcut bir DataTable öğesine referans veriyor. Sıfırdan doldurulamaz. Mevcut bir DataTable referansıyla örneklenmelidir.
Veriler, depolama alanında yer kaplar. Veriler, mevcut bir DataTable öğesine referans verir ve depolama alanında 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 gizlenebilir ve tekrar tekrar ortaya çıkarılabilir.
Klonlanabilir Görünümün DataTable sürümünü döndürebilir
Kaynak verilerdir; referanslar içermez Bir DataTable için canlı referans; DataTable verilerindeki her değişiklik anında görünüme yansıtılır.
Veri kaynağı olarak bir grafiğe geçirilebilir Veri kaynağı olarak bir grafiğe geçirilebilir
Hesaplanmış sütunlar desteklenmiyor Diğer sütunların birleştirilmesi veya değiştirilmesiyle anında hesaplanan bir değere sahip sütunlar olan hesaplanmış sütunları destekler.
Satır veya sütun gizlenmiyor Seçili sütunları gizleyebilir veya gösterebilir

Veri Tablosu Oluşturma ve Doldurulması

Veri Tablosu oluşturmanın ve doldurmanın birkaç farklı yolu vardır:

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

Adımlar:

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

Avantajları:

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

Dezavantajları:

  • Sayfayı bir web sunucusunda programlı olarak oluştururken DataTable oluşturucuya iletilecek bir JSON düz dizesi oluşturmak kadar yararlı değildir.
  • Tarayıcının hızına bağlıdır ve daha büyük tablolara (yaklaşık 1.000'den fazla hücre) sahip JSON düz dizelerinden daha yavaş olabilir.

Örnekler:

Aşağıda, bu tekniğin farklı varyasyonlarını kullanarak aynı veri tablosunu oluşturmaya ilişkin 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));

arrayToDataTable()

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 bir kod.
  • Her bir sütunun veri türünü açık bir şekilde belirtebilir veya Google Grafikler'in türü iletilen verilerden tahmin etmesine izin verebilirsiniz.
    • Bir sütunun veri türünü açıkça belirtmek için başlık satırında type özelliğiyle bir nesne belirtin.
    • Google Grafiklerinin türü tahmin etmesini sağlamak için sütun etiketinde 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 Değer Başlatıcı

Tablo oluşturucunuza, tablo şemasını ve isteğe bağlı olarak verileri de tanımlayarak JavaScript değişmez değer nesnesini iletebilirsiniz.

Avantajları:

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

Dezavantajları:

  • Söz diziminin doğru olması zor ve yazım hataları olabilir.
  • Çok okunaklı değil.
  • JSON'a açık bir şekilde benzer, ancak tam olarak 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

Bir Grafik Araçları Veri Kaynağına sorgu gönderdiğinizde, başarılı bir yanıt DataTable örneğidir. Döndürülen bu DataTable, diğer tüm DataTable'larla 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 DataTable veya DataView olabilir.

Hücrelerin biçimlendirilmiş değerlerini kullanır. Sütun etiketleri yoksayılır.

"," ve "\n" gibi özel karakterlerde, standart CSV çıkış kuralları kullanılarak çıkış yapılır.

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

Ramanujan,1729
Gauss,5050

kodunu görüntüler:

<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