Görselleştirmenizi yazma

Görselleştirme kodunu yazma

Looker Studio yardımcı kitaplığı, Looker ve sizin aranızda arayüz oluşturmak için kullanılır. Stüdyo'yu seçin. Kitaplığı kullanmak için görselleştirmeye çok yardımcı olur.

Kitaplıkta en dikkat çekici işlev subscribeToData. Bu işlev için iki bağımsız değişkenler: görselleştirmeyi oluşturan bir callback işlevi ve Verilerinizin ne tür bir dönüşüm yapmasını istediğinizi belirten options nesnesi azımsayabilirsiniz. Daha fazla bilgi için kitaplık referansını inceleyin.

Aşağıda, görselleştirme JavaScript'inizin yapabileceklerine ilişkin bir yardımcı olabilir.

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 yazarken aklınızda bulundurmanız gereken birkaç önemli nokta vardır. görselleştirmeye çok yardımcı olur.

subscribeToData işlevindeki güncellemeler; veri, stil veya iframe boyutu değişiklikleri.

Ö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ükleyip çalıştırır. Tüm DOM değiştirme işlemleri JavaScript üzerinden yapılması gerekir.

Örneğin, aşağıdaki kod DOM'yi tanımlar ve buna bir div 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 yüklemenize izin verir. dosyası olarak kaydedebilirsiniz. Yüklenen kod, dscc'yi içeren tek bir dosya olmalıdır yardımcı kitaplığı, JavaScript görselleştirme kitaplıkları ve görselleştirmeniz girin.

Bunu bash komutunda 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 manifesti dosyası görselleştirmeyle ilgili meta verileri sağlar: ve görselleştirme kaynaklarının konumuyla ilgili bilgiler içerebilir. Konum "bileşen kimliği" olarak adlandırılır ve bir topluluk görselleştirmeye daha detaylı değineceğiz.

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

Manifest'in devMode parametresi, görselleştirmeye çok yardımcı olur. Görselleştirme geliştirirken devMode, true Kalıcı yenilemelerin, kaynakların en yeni sürümünü yüklediğinden emin olun. Bir kodu kararlı, devMode içeren raporların false olması gerekir topluluk görselleştirmeleri hızla yüklenir. Önbelleğe alma hakkında daha fazla bilgi edinmek için önbelleğe almayla ilgili ileri düzey kılavuza göz atın.

Sonraki adımlar

Artık görselleştirme kodunuzu yazdığınıza göre görselleştirmenize ev sahipliği yapın.