Yardımcı kitaplığı kullanma

Looker Studio, postMessage öğesini içeren iframe'e veri ve stil bilgileri sağlayan arayüzün topluluk görselleştirmeye daha detaylı değineceğiz. Bu kılavuzda, yardımcıyı kullanma hakkında daha ayrıntılı bilgi verilmektedir. kitaplığını açar.

Topluluk görselleştirmelerinde ds-component iki işlev sunar.

  1. iframe'in boyutlarını alma
  2. Looker Studio ile iletişimi yönetme

Etkinliklere abone olma

Bir kullanıcı, görselleştirmenizle etkileşime geçtiğinde (ör. seçili alanları değiştirme), yeniden boyutlandırırsanız veya bileşeni yeniden boyutlandırırsanız Looker Studio, etkinlikleri görselleştirmeye çok yardımcı olur.

dscc.subscribeToData, her biri için çağrılacak bir geri çağırma kaydeder Looker Studio'dan postMessage etkinliği. Geri çağırma bir data iletildi nesnesini tanımlayın.

function drawViz(data){
  // obtain the height and width to scale your visualization appropriately
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  // write your visualization code here
  console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
}

// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

Döndürülen veriler

Her iki veri dönüşümü de beş anahtarlı bir nesne döndürür.

Anahtar Amaç
style Kullanıcı tarafından seçilen ve varsayılan stil bilgileri
fields Kullanıcı tarafından seçilen alan bilgileri
interactions Kullanıcı tarafından seçilen etkileşimler
theme Tema bilgilerini bildir
tables Veri satırları
dateRanges Varsayılan ve karşılaştırma tarih aralıkları

Verilerin biçimi:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById),
}

Farklı görselleştirmeler için farklı veri biçimleri gerekir. En yaygın iki biçim şunlardır: dizi veya nesne dizisidir. ds bileşeni kitaplığı dönüşümleri içerir.

Bu iki dönüşüm kitaplık-başvurusu. Bu Haritayı, genellikle JavaScript'in beklediği veri biçimlerine kolayca dönüştürür görselleştirme kitaplıkları. Desteklenen iki dönüşüm şunlardır: objectTransform, bir nesne dizisi döndürür, tableTransform ise bir dizi döndürür. dizi olabilir.

dscc.objectTransform

Bazı görselleştirmeler verilerin bir nesne dizisi olarak olmasını bekler.

Örneğin:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

Aşağıdaki kod dscc.objectTransform biçimindedir.


function drawViz(data){
  // what the object transform could look like
  // [
  //  {'configId1': ['hello'], 'configId2': [1] },
  //  {'configId1': ['world'], 'configId2': [2] }
  // ]
  var dsccObjectTransformData = data.tables.DEFAULT;

  // creating an array of objects
  var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
    return {
      'configId1': d.configId1[0],
      'configId2': d.configId2[0]
    };
  };

}

Veri bölümleri, kullanıcının birden fazla alan girebileceği şekilde tanımlanırsa ( Örneğin, bir sankey diyagramı için tanımlanmış iki boyut varsa, dönüşüm, Looker'ın döndürdüğü veri biçimi nedeniyle kullanım alanınıza bağlı olacaktır. Studio'nun görünümü şu şekilde olacaktır:


var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

dscc.tableTransform

Bazı görselleştirme kitaplıkları bir dizi dizi olmasını bekler.

Örneğin:

var data = [
  ['hello', 1],
  ['world', 2]
];

Aşağıdaki kodda, dscc.tableTransform biçimindedir.


function drawViz(data);
  // what the below object looks like
  // {
  //    headers: [{
  //      "id": "qt_ky8sltutsb",
  //      "name": "dimension",
  //      "type": "TEXT",
  //      "concept": "DIMENSION",
  //      "configId": "configId1"
  //    }, {
  //      "id": "qt_m9dtntutsb",
  //      "name": "metric",
  //      "type": "NUMBER",
  //      "concept": "METRIC",
  //      "configId": "configId2"
  //    }],
  //  rows: [
  //    ['hello', 1],
  //    ['world', 2]
  //  ];
  // }
  var dsccTableTransformObject = data.tables.DEFAULT;

  // accessing the row of rows
  var rowOfRows = dsccTableTransformObject.rows;

  // accessing the header row
  var headers = dsccTableTransformObject.headers;
}

dscc.subscribeToData(drawViz, {transform: tableTransform});