Görselleştirmenizi yazma

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 dikkat çekici işlev, iki bağımsız değişken içeren subscribeToData'tir: görselleştirmeyi oluşturan bir callback işlevi ve verilerinizin ne tür bir dönüşüm gerçekleştirmesini istediğinizi belirten 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 genel bakış sunulmaktadır.

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 göz önünde bulundurulması gereken birkaç önemli nokta vardır.

subscribeToData işlevinden gelen 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'yi değil JavaScript dosyalarını yükler ve çalıştırır. Tüm DOM manipülasyonu, JavaScript aracılığıyla gerçekleştirilmelidir.

Örneğin: Aşağıdaki kod, DOM'ye bir div öğesi tanımlar ve ekler.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

Kodu paket haline getirme

Looker Studio topluluk görselleştirmeleri yalnızca bir JavaScript dosyası yüklemenize izin verir. Yüklenen kod, dscc yardımcı kitaplığını, tüm JavaScript görselleştirme kitaplıklarını ve görselleştirme kodunuzu içeren tek bir dosya olmalıdır.

Bunu bash modunda yapmak için aşağıdaki gibi cat komutunu kullanabilirsiniz.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

Manifest'i tanımlama

Görselleştirme manifest dosyası, görselleştirmeyle ilgili meta verilerin yanı sıra görselleştirme kaynaklarının konumuyla ilgili bilgiler sağlar. Manifest dosyasının konumu "bileşen kimliği" olarak adlandırılır ve bir topluluk görselleştirmesini yüklemek için kullanılır.

Bir örnek manifest görmek için manifest referansını inceleyin.

Manifest'in devMode parametresi, görselleştirmenin önbelleğe alma davranışını belirler. Görselleştirmeyi geliştirirken, kalıcı yenilemelerin kaynakların en son sürümünün yüklenmesini sağlamak için devMode true olmalıdır. Kod kararlı hale geldiğinde, topluluk görselleştirmeleri içeren raporların hızlı bir şekilde yüklenmesini sağlamak için devMode değeri false olmalıdır. Önbelleğe alma hakkında daha fazla bilgi edinmek için önbelleğe alma gelişmiş kılavuzuna bakın.

Sonraki adımlar

Artık görselleştirmenizin kodunu yazdığınıza göre görselleştirmenizi nasıl barındıracağınızı öğrenebilirsiniz.