1. Giriş
Google E-Tablolar ile Codelab oynatma listesinin beşinci bölümüne hoş geldiniz. Bu codelab'de, veri kümesinin grafiğini oluşturmak için Apps Komut Dosyası'ndaki E-tablo hizmetini nasıl kullanacağınızı öğretiyoruz. Grafiği Google Slaytlar'daki yeni bir sunuya aktarmak için Slaytlar hizmetini nasıl kullanacağınızı da öğreneceksiniz.
Neler öğreneceksiniz?
- Apps Komut Dosyası ile çizgi grafik oluşturma.
- Grafikler yeni bir Slaytlar sunusuna nasıl aktarılır?
- İletişim kutuları, E-Tablolar'da kullanıcıya nasıl sunulur?
Başlamadan önce
Bu, Google E-Tablolar ile Apps Komut Dosyası'nın Temelleri oynatma listesindeki beşinci codelab'dir. Bu codelab'e başlamadan önce önceki codelab'leri tamamladığınızdan emin olun:
Gerekenler
- Bu oynatma listesinin önceki codelab'lerinde incelenen temel Apps Komut Dosyası konuları hakkında bilgi edinin.
- Apps Komut Dosyası düzenleyicisine dair temel bilgi sahibi olma
- Google E-Tablolar'la ilgili temel bilgi sahibi olma
- E-Tablolar A1 Gösterimi'ni okuma özelliği
- JavaScript ve
Stringsınıfı hakkında temel bilgi sahibi olma
2. Kur
Devam etmeden önce bazı verilerin bulunduğu bir e-tabloya ihtiyacınız var. Daha önce olduğu gibi, bu alıştırmalarda kullanabileceğiniz bir veri sayfası hazırladık. Aşağıdaki adımları uygulayın:
- Veri sayfasını kopyalamak için bu bağlantıyı tıklayın ve ardından Kopya oluştur'u tıklayın. Yeni e-tablo, Google Drive klasörünüze yerleştirilir ve "Tarihlerin Kopyası ile ABD Doları Döviz Kuru" olarak adlandırılır.
- E-tablo başlığını tıklayıp &"Tarihlerin ve ABD Doları Döviz Kuruların Kopyası"ndan "Tarihler ve ABD Doları Döviz Kuru" olarak değiştirin. E-tablonuz şu şekilde görünmelidir: Farklı tarihlerde farklı ABD doları döviz kurlarıyla ilgili bazı temel bilgiler:
- Komut dosyası düzenleyiciyi açmak için Uzantılar> Apps Komut Dosyası'nı tıklayın.
Size zaman kazandırmak amacıyla bu e-tabloda özel bir menü oluşturmak için küçük bir kod ekledik. E-tablonun kopyası açıldığında menünün görüntülendiğini görebilirsiniz:
Bu e-tablo ve projeyle codelab'i başlatmaya hazırsınız. Grafikler ve zamana dayalı tetikleyiciler hakkında bilgi edinmeye başlamak için bir sonraki bölüme geçin.
3. Apps Komut Dosyası ile E-Tablolar'da grafik oluşturma
Bir veri kümesini görselleştirmek için belirli bir grafik tasarlamak istediğinizi varsayalım. Google E-Tablolar'da grafik oluşturmak, düzenlemek ve eklemek için Apps Komut Dosyası'nı kullanabilirsiniz. Bir e-tabloda yer alan bir grafik, yerleştirilmiş grafik olarak adlandırılır.
Grafikler, bir veya daha fazla veri dizisini görselleştirmek için kullanılır. Yerleştirilmiş grafikler için, sunulan veriler genellikle e-tablodan gelmektedir. Genellikle, e-tablodaki verileri güncellemek E-Tablolar'ın grafiği de otomatik olarak güncellemesine neden olur.
Özelleştirilmiş, yerleştirilmiş grafikleri sıfırdan oluşturmak veya mevcut grafikleri güncellemek için Apps Komut Dosyası'nı kullanabilirsiniz. Bu bölümde, Apps Komut Dosyası ve Spreadsheet hizmetiyle E-Tablolar'da yerleştirilmiş grafik oluşturmayla ilgili temel bilgiler sunulmaktadır.
Uygulama
Veri e-tablonuzun kopyasında, "Tarihler ve Döviz Kuru" veri kümesi, farklı tarihlerdeki farklı para birimlerinin döviz kurlarını (1 ABD doları için) gösterir. Bu verilerin bir kısmını görselleştirmek için grafik oluşturan bir Apps Komut Dosyası işlevini uygulayacaksınız.
Aşağıdaki adımları uygulayın:
- Apps Komut Dosyası düzenleyicisinde,
onOpen()fonksiyonundan sonra komut dosyasının projesinin sonunaCode.gsişlevini ekleyin:
/**
* Creates and inserts an embedded
* line chart into the active sheet.
*/
function createEmbeddedLineChart() {
var sheet = SpreadsheetApp.getActiveSheet();
var chartDataRange = sheet.getRange(
'Dates and USD Exchange Rates dataset!A2:F102');
var hAxisOptions = {
slantedText: true,
slantedTextAngle: 60,
gridlines: {
count: 12
}
};
var lineChartBuilder = sheet.newChart().asLineChart();
var chart = lineChartBuilder
.addRange(chartDataRange)
.setPosition(5, 8, 0, 0)
.setTitle('USD Exchange rates')
.setNumHeaders(1)
.setLegendPosition(Charts.Position.RIGHT)
.setOption('hAxis', hAxisOptions)
.setOption("useFirstColumnAsDomain", true)
.build();
sheet.insertChart(chart);
}
- Komut dosyası projenizi kaydedin.
Kod incelemesi
Eklediğiniz kod, temel bir çizgi grafik oluşturmak için Grafik "Tarihler ve ABD Doları Döviz Kurları" veri kümesi tarafından çağrılan işlevi uygular. Kodu inceleyelim.
İlk satır, aşağıdaki üç değişkeni oluşturur:
sheet: Geçerli etkin sayfaya başvurudur.chartDataRange: Görselleştirmek istediğimiz veri aralığıdır. Kod, aralığı belirtmek için A1 gösterimini kullanarak Tarihler ve ABD doları döviz kurları veri kümesi adlı sayfadaki A2 ile F102 arasındaki hücreleri kapsar. Sayfayı özel olarak adlandırarak, aralık her zaman veri konumunu kapsadığından farklı bir sayfa etkin olsa bile menü öğesinin çalışmasını sağlarız. 2. satırdan itibaren sütun başlıklarını ekleyeceğiz ve yalnızca en son 100 tarihi (satırları) göstereceğiz.hAxisOptions: Kodun, yatay eksenin görünümünü yapılandırmak için kullandığı bazı ayar bilgilerini içeren temel bir JavaScript nesnesi. Özellikle, yatay eksen metin etiketlerini 60 derece eğimli olacak şekilde ve dikey kılavuz çizgilerinin sayısını 12 dereceye ayarlarlar.
Sonraki satır, bir çizgi grafik oluşturucu nesnesi oluşturur. Apps Komut Dosyası'ndaki yerleşik grafikler bir Oluşturucu tasarım kalıbı kullanılarak oluşturulur. Bu tasarım kalıbının tam açıklaması, bu codelab'in kapsamı dışındadır. Bu nedenle, şimdilik Spreadsheet hizmetinin çeşitli EmbeddedChartBuilder sınıfları sağladığını anlamanız yeterlidir. Kodunuz, bir grafik oluşturmak için öncelikle yerleştirilmiş grafik oluşturucu nesnesi oluşturur, grafik ayarlarını tanımlamak için kullandığı yöntemleri kullanır, ardından son EmbeddedChart nesnesini oluşturmak için bir build() yöntemi çağırır. Tüm grafik yapılandırması oluşturucu sınıfları üzerinden yönetildiğinden kodunuz doğrudan EmbeddedChart nesnesini değiştirmez.
E-tablo hizmeti, bir üst EmbeddedChartBuilder sınıfı ve ondan devralınan birden fazla alt oluşturucu sınıfı (EmbeddedLineChartBuilder gibi) sağlar. Alt sınıflar, Apps Komut Dosyası'nın yalnızca belirli grafik türleri için geçerli olan derleyici grafik yapılandırma yöntemlerini sağlamasına olanak tanır. Örneğin, EmbeddedPieChartBuilder sınıfı yalnızca pasta grafikler için geçerli olan bir set3D() yöntemi sağlar.
Kodunuzda, bu satır lineChartBuilder oluşturucu nesne değişkenini oluşturur:
var lineChartBuilder = sheet.newChart().asLineChart();
Kod, EmbeddedChartBuilder nesnesi oluşturmak için Sheet.newChart() yöntemini çağırır ve ardından oluşturucu türünü EmbeddedLineChartBuilder olarak ayarlamak için EmbeddedChartBuilder.asLineChart() yöntemini kullanır.
Daha sonra kod, grafik grafiği oluşturucuyu kullanarak grafik oluşturur. Kodun bu bölümü, grafik ayarlarını tanımlamak için kullanılan bir dizi yöntem çağrısının ardından grafik oluşturmak için bir build() çağrısı içerir. Önceki codelab'lerde gördüğünüz gibi, kod kullanıcılar tarafından okunabilir durumda tutmak için method zinciri kullanır. Telefon görüşmelerinin yapıldığı yöntem:
addRange(range): Grafikte gösterilen veri aralığını tanımlar.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): Grafiğin sayfada nereye yerleştirileceğini belirler. Burada kod, grafiğin H5 hücresinin sol üst köşesini yerleştiriyor.setTitle(title): Grafik başlığını ayarlar.setNumHeaders(headers): Veri aralığındaki kaç satır veya sütunun başlık olarak kabul edileceğini belirleyin. Burada kod, veri aralığındaki ilk satırı başlık olarak kullanır. Yani bu satırdaki metin, grafikteki bağımsız veri dizileri için etiketler olarak kullanılır.setLegendPosition(position): Grafik açıklamasını grafiğin sağ tarafına taşır. Bu yöntem, parametre olarak Charts.Position enum'u kullanır.setOption(option, value): Karmaşık grafik seçeneklerini ayarlar. Burada kod,hAxisseçeneğinihAxisOptionsnesnesine ayarlar. Bu yöntemi kullanarak ayarlayabileceğiniz birkaç seçenek vardır. Her grafik türü için seçenekler ve olası değerler, Charts API Grafik Galerisi'nde açıklanmıştır. Örneğin, çizgi grafikler için ayarlayabileceğiniz seçenekler Çizgi grafik yapılandırma seçenekleri bölümünde belgelenmiştir.setOption(option, value)yöntemi ileri düzey bir konudur. Bu nedenle, Apps Komut Dosyası'nda grafik oluşturma konusunda daha rahat oluncaya kadar bu yöntemi kullanmaktan kaçınmak isteyebilirsiniz.build(): Yukarıdaki ayarları kullanarak birEmbeddedChartnesnesi oluşturur ve döndürür.
Son olarak kod, oluşturulan grafiği etkin sayfaya yerleştirmek için Sheet.insertChart(chart) işlevini çağırır.
Sonuçlar
Biçimlendirme işlevinizi çalışırken şunları görebilirsiniz:
- Henüz yapmadıysanız komut dosyası projenizi Apps Komut Dosyası düzenleyicisine kaydedin.
- Sunum veri kümesi > Grafik &Tarihleri ve ABD Doları Döviz Kuru Veri Kümesi menü öğesini tıklayın.
Komut dosyanız artık verilerinizin sağına yeni bir grafik yerleştirir:
Tebrikler, Apps Komut Dosyası ile yerleştirilmiş bir çizgi grafik oluşturdunuz. Bir sonraki bölümde, grafiğinizi Google Slaytlar'a nasıl aktaracağınızı öğreneceksiniz.
4. Grafiklerinizi Slaytlar'a aktarma
Apps Komut Dosyası'nın en güçlü yanlarından biri, bir Google Workspace uygulamasından diğerine kolayca veri taşımanıza olanak tanımasıdır. Bu uygulamaların çoğu E-tablo hizmetine benzer şekilde özel bir Apps Komut Dosyası hizmetine sahiptir. Örneğin, Gmail'de Gmail hizmeti, Google Dokümanlar'da Doküman hizmeti ve Google Slaytlar'da Slaytlar hizmeti bulunmaktadır. Tüm bu yerleşik hizmetlerle, bir uygulamadaki verileri çıkarabilir, işleyebilir ve sonucu başka bir uygulamaya yazabilirsiniz.
Bu bölümde, bir Google e-tablosuna yerleştirilen her bir grafiği yeni bir Google Slaytlar sunusuna nasıl aktaracağınızı öğreneceksiniz. Ayrıca, kullanıcılarınıza E-Tablolar'da özel mesajlar göstermenin iki yolunu da göreceksiniz.
Uygulama
Burada, Sunum veri kümesini sunup > Grafikleri Slaytlara aktar menü öğesinin çağırdığı işlevi uygulayacaksınız. Aşağıdaki adımları uygulayın:
- Apps Komut Dosyası düzenleyicisinde,
createEmbeddedLineChart()fonksiyonundan sonra komut dosyasının projesinin sonunaCode.gsişlevini ekleyin:
/**
* Create a Slides presentation and export
* all the embedded charts in this spreadsheet
* to it, one chart per slide.
*/
function exportChartsToSlides() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Fetch a list of all embedded charts in this
// spreadsheet.
var charts = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
charts = charts.concat(sheets[i].getCharts());
}
// If there aren't any charts, display a toast
// message and return without doing anything
// else.
if (charts.length == 0) {
ss.toast('No charts to export!');
return;
}
// Create a Slides presentation, removing the default
// title slide.
var presentationTitle =
ss.getName() + " Presentation";
var slides = SlidesApp.create(presentationTitle);
slides.getSlides()[0].remove();
// Add charts to the presentation, one chart per slide.
var position = {left: 40, top: 30};
var size = {height: 340, width: 430};
for (var i = 0; i < charts.length; i++) {
var newSlide = slides.appendSlide();
newSlide.insertSheetsChart(
charts[i],
position.left,
position.top,
size.width,
size.height);
}
// Create and display a dialog telling the user where to
// find the new presentation.
var slidesUrl = slides.getUrl();
var html = "<p>Find it in your home Drive folder:</p>"
+ "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
+ presentationTitle + "</a></p>";
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutput(html)
.setHeight(120)
.setWidth(350),
"Created a presentation!"
);
}
- Komut dosyası projenizi kaydedin.
Kod incelemesi
Bu kod beklediğinizden kısa olabilir. Kodu beş bölüme ayırarak ne yaptığını inceleyelim:
1: Grafikleri inceleyin
İlk birkaç satır etkin e-tabloda arama yaparak yerleştirilmiş tüm grafikleri bulur ve bunları charts dizisinde toplar. Bu satırlar, e-tablo ve grafik listelerini almak için Spreadsheet.getSheets() yöntemini ve Sheet.getCharts() yöntemini kullanır. JavaScript Array.concat() yöntemi, her sayfadaki grafiklerin listesini charts için eklemek üzere kullanılır.
2: Dışa aktarılacak grafikler olup olmadığını kontrol edin
Kod, dışa aktarılacak herhangi bir grafik olup olmadığını doğrular. Boş bir sunu oluşturmaktan kaçınmak isteriz. Bu yüzden, grafik yoksa kod Spreadsheet.toast(message) kullanarak kısa mesaj oluşturur. Bu, E-Tablolar'ın sağ alt köşesinde açılan, birkaç saniye süren ve sonra kaybolan küçük bir "göz atma" iletişim kutusudur:
Dışa aktarılacak grafik yoksa kod, kısa mesaj oluşturur ve başka bir işlem yapmadan çıkış yapar. Dışa aktarılacak grafikler varsa kod sonraki birkaç satırda bir sunu oluşturmaya devam eder.
3: Sunu oluşturma
presentationTitle değişkeni, yeni sununun dosya adını içerecek şekilde oluşturuldu. E-tablonun adı olarak ayarlanmıştır ve sonunda Presentation yer alır. Ardından kod, bir sunu oluşturmak için Slaytlar hizmet yöntemini SlidesApp.create(name) çağırır.
Yeni sunular tek bir boş slaytla oluşturulur. Sunumumuzda bunu istemediğimiz için kod Presentation.getSlides() ve Slide.remove() ile kaldırılır.
4: Grafikleri dışa aktarma
Bir sonraki bölümde kod, içe aktarılan grafiklerin slaytta nereye yerleştirileceğini ve grafiğin ne kadar büyük olacağını (piksel cinsinden) ayarlamak için JavaScript nesnelerinin position ve size boyutlarını tanımlar.
Kod, grafik listesindeki her grafiğin döngüye alınır. Her grafik için Presentation.appendSlide() ile bir newSlide oluşturulur. Bu slayt, slaytın sonuna eklenir. Slide.insertSheetsChart(sourceChart, left, top, width, height) yöntemi, grafiği belirtilen position ve size ile slayta aktarmak için kullanılır.
5: Sununun konumunu paylaşın
Son olarak, kodun kullanıcıya yeni sunumun nerede olduğunu, tercihen açmak için tıklayabileceği bir bağlantıyı bildirmesi gerekir. Bunun için kod, Apps Komut Dosyası'nın HTML hizmetini kullanarak özel kalıcı iletişim kutusu oluşturur. Kalıcı iletişim kutuları (Apps Komut Dosyası'nda özel iletişim kutuları olarak da bilinir) E-Tablolar arayüzünde görünen pencerelerdir. Görüntülendiğinde, özel iletişim kutuları kullanıcının E-Tablolar ile etkileşimde bulunmasını engeller.
Özel iletişim kutusu oluşturmak için kodun içeriğini tanımlayan HTML gerekir. Bu, html değişkeninde sağlanır. İçerikte kısa bir paragraf ve köprü bulunmaktadır. Köprü, Presentation.getUrl() tarafından sağlanan sunu URL'sine bağlanan presentationTitle değişkenidir. Köprü, target="_blank" özelliğini de kullanır. Böylece sunu, iletişim kutusu yerine yeni bir tarayıcı sekmesinde açılır.
HTML, HtmlService.createHtmlOutput(html) yöntemi tarafından bir HtmlOutput nesnesine ayrıştırılır. HtmlOutput nesnesi, kodun HtmlOutput.setHeight(height) ve HtmlOutput.setWidth(width) içeren özel iletişim kutusunun boyutunu belirlemesine olanak tanır.
htmlOutput oluşturulduktan sonra kod, belirtilen başlığa sahip iletişim kutusunu görüntülemek için Ui.showModalDialog(htmlOutput, title) yöntemini kullanır.
Sonuçlar
İkinci menü öğesini uyguladığınıza göre bunu uygulamada görebilirsiniz. exportChartsToSlides() işlevini test etmek için:
- Henüz yapmadıysanız komut dosyası projenizi Apps Komut Dosyası düzenleyicisine kaydedin.
- E-tablonuzu açın ve dışa aktarılacak bir grafik oluşturmak için Göster veri kümesi > Grafik &Tarihleri ve ABD Doları Döviz kurları veri kümesi menü öğesini tıklayın. Etkin sayfada H5 hücresine sabitlenmiş olarak görünür.
- Veri kümesini göster > Grafikleri Slaytlar'a aktar menü öğesini tıklayın. Komut dosyasını yeniden yetkilendirmeniz istenebilir.
- Komut dosyanızın isteği işlediğini ve özel iletişim kutusunu göreceksiniz.
- Yeni Slaytlar sunusunu açmak için Tarihler ve ABD Doları Döviz Kuru Sunusu bağlantısını tıklayın:
İsterseniz, e-tablonuza daha fazla grafik ekleyebilir ve birden çok slayt içeren bir sunu oluşturmak için menü öğesini yeniden seçebilirsiniz.
Artık E-Tablolar'da oluşturulan grafikleri bir Slaytlar sunusuna aktarabilirsiniz. Özel bir iletişim kutusu oluşturmak için kod da yazabilirsiniz.
Bu codelab'in son alıştırmasını tamamladınız. Öğrendiklerinizi incelemek için sonraki bölüme geçin.
5. Sonuç
Tebrikler, bu codelab'i ve Google E-Tablolar ile Codescript'in tamamını içeren codelab'i tamamladınız. E-Tablolar deneyiminizi genişletmek ve Apps Komut Dosyası'nın özelliklerini keşfetmek için bu oynatma listesinde belirtilen ilkeleri kullanabilirsiniz.
Bu codelab'i faydalı buldunuz mu?
Öğrendikleriniz
- Apps Komut Dosyası ile yerleşik çizgi grafik oluşturma.
- E-Tablolar'da kullanıcıya kısa ileti ve özel iletişim kutularını sunma.
- Grafik yeni bir Slaytlar sunusuna nasıl aktarılır?
Sonraki adımlar
Bu oynatma listesini başarıyla tamamladınız. Ancak Apps Komut Dosyası hakkında öğrenilecek daha çok şey var.
Aşağıdaki kaynaklara göz atın:
- Apps Komut Dosyası Geliştiricisi dokümanları
- Apps Komut Dosyası Kılavuzları
- Apps Komut Dosyası Referansı belgeleri
- Stack Overflow hakkında Apps Komut Dosyası soruları
- GitHub'daki Apps Komut Dosyası kod örnekleri
Mutlu Komut Dosyaları!