Görselleştirme kodunu yazma
Looker Studio yardımcı kitaplığı, sizinle Looker Studio arasında bir arayüz sağlar. Kitaplığı kullanmak için görselleştirmeyi oluşturan bir geri çağırma işlevi sağlayın.
Kitaplıktaki en belirgin işlev subscribeToData'dır. Bu işlev iki bağımsız değişken alır: görselleştirmeyi oluşturacak bir callback işlevi ve verilerinizin nasıl bir dönüşüm geçirmesini istediğinizi belirten bir options nesnesi. Daha fazla bilgi edinmek için kitaplık referansını inceleyin.
Aşağıda, görselleştirme JavaScript'inizin nasıl görünebileceğine dair bir taslak verilmiştir.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Topluluk görselleştirmesi yazarken aklınızda bulundurmanız gereken birkaç önemli nokta vardır.
subscribeToData işlevindeki güncellemeler, veriler, stil veya iFrame boyutu değiştiğinde gerçekleşir.
Örneğin:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio, HTML değil JavaScript dosyalarını yükleyip çalıştırır. Tüm DOM manipülasyonları JavaScript aracılığıyla yapılmalıdır.
Örneğin: Aşağıdaki kod, DOM'a bir div tanımlar ve ekler.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Kodu paketleme
Looker Studio topluluk görselleştirmeleri yalnızca bir JavaScript dosyası yüklemenize olanak tanır. Yüklenen kod, dscc helper kitaplığı, tüm JavaScript görselleştirme kitaplıkları ve görselleştirme kodunuzu içeren tek bir dosya olmalıdır.
Bunu bash'te yapmak için aşağıdaki gibi cat komutunu kullanabilirsiniz.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Manifest dosyasını tanımlama
Görselleştirme manifest dosyası, görselleştirme kaynaklarının konumuyla ilgili bilgilerin yanı sıra görselleştirme hakkında meta veriler sağlar. Manifest dosyasının konumu "bileşen kimliği" olarak adlandırılır ve topluluk görselleştirmesini yüklemek için kullanılır.
Örnek manifest dosyası için manifest referansını inceleyin.
olmalıdır.Manifest dosyasının devMode parametresi, görselleştirmenin önbelleğe alma davranışını belirler. Görselleştirme geliştirilirken, zorunlu yenilemelerin kaynakların en son sürümünü yüklemesini sağlamak için devMode true olmalıdır. Kod kararlı hale geldiğinde, topluluk görselleştirmeleri içeren raporların hızlı yüklenmesini sağlamak için devMode false olmalıdır. Önbelleğe alma hakkında daha fazla bilgi edinmek için önbelleğe alma ile ilgili gelişmiş kılavuza bakın.
Sonraki adımlar
Görselleştirmenizin kodunu yazdığınıza göre şimdi görselleştirmenizi nasıl barındıracağınızı öğrenin.