Looker Studio, topluluk görselleştirmesini içeren iframe'e veri ve stil bilgileri sağlamak için postMessage arayüzünü kullanır. Bu kılavuzda, yardımcı kitaplığın kullanımı hakkında daha ayrıntılı bilgi verilmektedir.
Topluluk görselleştirmeleri için ds-component iki işlevi vardır.
- iframe'in boyutlarını alma
- Looker Studio ile iletişimi yönetme
Etkinliklere abone olma
Bir kullanıcı, seçili alanları veya stili değiştirme ya da bileşeni yeniden boyutlandırma gibi görsellerinizle etkileşim kurduğunda Looker Studio, görselleştirmenize etkinlik gönderir.
dscc.subscribeToData
, Looker Studio'daki her postMessage
etkinliği için çağrılacak bir geri çağırma kaydeder. Geri çağırma, bir data
nesnesine geçirilir.
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 bildirin |
tables |
Veri satırları |
dateRanges |
Varsayılan ve karşılaştırma tarih aralıkları |
Veri 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. Yaygın olarak kullanılan iki biçim, dizi veya nesne dizisidir. ds-component kitaplığı, sizi doğrudan bu veri biçimlerine götürmek için tasarlanmış iki dönüşüm sağlar.
Bu iki dönüşüm, kitaplık referansında belgelenmiştir. Bu işlemler, eşlemeyi JavaScript görselleştirme kitaplıklarının yaygın olarak beklediği veri biçimlerine kolayca dönüştürür. Desteklenen iki dönüşüm şunlardır: Bir nesne dizisi döndüren objectTransform
ve bir dizi dizisi döndüren tableTransform
.
dscc.objectTransform
Bazı görselleştirmelerde veriler bir nesne dizisi şeklinde bekler.
Örneğin:
var data = [
{'colA': 'hello', 'colB', 'world'},
{'colA': 'hello', 'colB', 'world'}
];
Aşağıdaki kod, dscc.objectTransform
biçiminden bir nesne dizisine nasıl erişileceğini gösterir.
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 çok alan girebileceği şekilde tanımlanırsa (örneğin, bir sankey diyagramı için tanımlanmış iki boyut varsa) Looker Studio'nun döndürdüğü veri biçimi daha çok aşağıdaki gibi göründüğünden dönüşüm, kullanım alanınıza bağlı olur:
var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]
dscc.tableTransform
Bazı görselleştirme kitaplıkları bir dizi dizisi bekler.
Örneğin:
var data = [
['hello', 1],
['world', 2]
];
Aşağıdaki kod, dscc.tableTransform
biçimindeki bir satır satırına nasıl erişileceğini gösterir.
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});