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
- Grafikte Veriler Nasıl Temsil Edilir?
- Grafiğim Hangi Tablo Şemasını Kullanıyor?
- DataTables ve DataViews
- Veri Tablosu Oluşturma ve Doldurma
- dataTableToCsv()
- 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 |
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.
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:
- Yeni bir DataTable oluşturun, ardından addColumn()/addRows()/addRow()/setcell() çağrısı yapın
- diziToDataTable()
- JavaScript değişmez başlatıcısı
- Veri Kaynağı Sorgusu Gönderme
Boş DataTable + addColumn()/addRows()/addRow()/setCell()
Adımlar:
- Yeni bir
DataTable
örneği oluşturun - Sütun ekleyin
- İ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.
- Bir sütunun veri türünü açıkça belirtmek için başlık özelliğinde
Ö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
- Grafik Araçları veri kaynağını sorgulama
- DataTable JavaScript değişmez söz dizimi
DataTable
referansıDataView
referansıarrayToDataTable()
referansı