Topluluk görselleştirmenizi grafik filtresi olarak kullanabilir ve raporu topluluk görselleştirmenizle etkileşimlere göre filtreleyebilirsiniz.
Topluluk görselleştirme grafiği filtrelerinin işleyiş şekli
Topluluk görselleştirmenizi grafik filtresi olarak kullanmak için şunları yapmanız gerekir:
config.interactions
mülkünü yapılandırma- Filtre bilgileriyle
dscc.sendInteraction()
çağıran bir kod yazın.
Etkileşimleri tanımlama
Görselleştirmeniz etkileşimleri destekliyorsa bunlar yapılandırmanızda tanımlanmalıdır. Tanımlandığında, özellik panelinde bir onay kutusu görünür.
Örnek config.interactions
:
{
"data": ...,
"style": ...,
"interactions": [
{
"id": "interactionsConfigId",
"supportedActions": ["FILTER"]
}
]
}
Filtre için kod yazma
Kullanıcı etkileşimini bir filtre işlemiyle ilişkilendirmek için dscc.sendInteraction()
kullanın.
Örnek:
const handleInteraction = () => {
// this is the interactionId defined in the config
const interactionId = "interactionConfigId";
// the ID of the field you want to filter on
const dimensionId = "qt_ky8sltutsb";
// the value of the field you want to filter on
const value = "USA";
// the interaction type - only FILTER is supported right now
const FILTER = dscc.InteractionType.FILTER;
let interactionData = {
concepts: [dimensionId],
values: [[value]]
};
// send Looker Studio an instruction to filter other charts in the dashboard
dscc.sendInteraction(interactionId, FILTER, interactionData);
};
Rapor düzenleyici, görselleştirmeniz için "filtre" etkileşimlerini etkinleştirmediyse Looker Studio, dscc.sendInteraction
tarafından gönderilen mesajları yoksayar.
Filtre durumunu takip etme
Looker Studio'nun görselleştirmenize gönderdiği data
nesnesi, etkileşimler hakkında bilgi sağlar.
Örnek data.interactions
:
"onClick": {
"value": {
"type": "FILTER",
"data": {
"concepts": [
"qt_h6oibrb6wb",
"qt_i6oibrb6wb"
],
"values": [
[
"Afternoon",
"Sunday"
],
[
"Afternoon",
"Thursday"
],
[
"Morning",
"Tuesday"
]
]
}
},
"supportedActions": [
"FILTER"
]
}
value.data
tanımlı değilse görselleştirme şu anda kontrol panelinin diğer bileşenlerini filtreliyor demektir.
Örnek:
const barHighlighting = (interactionsById) => {
// the interactionId defined in the config
const interactionId = "interactionConfigId";
const interactionField = interactionsById[interactionId];
// if filter is selected
const filterSelected = interactionField.type === "FILTER";
// if the viz is currently acting as a filter
const filterHasData = "data" in interactionField;
if (filterSelected && filterHasData){
// call the highlightBar function on the selected data
highlightBar(interactionField.data);
} else {
// clear highlighting if no data selected
clearHighlight()
}
}
interactionData
oluşturuluyor
interactionData
nesnesi, Looker Studio'nun kontrol panelinizi nasıl filtreleyeceğini tanımlar.
Tek boyut filtresi
Bu çubuk grafik, kitap sayısını dile göre (bir boyut ve bir metrik) görselleştirir. Bir kullanıcının İspanyolca kitaplara karşılık gelen çubuğu seçtiğini ve bu seçimin kontrol panelinin geri kalanının filtrelenmesini istediğinizi varsayalım. interactionData
şu şekilde görünür:
var interactionData = {
"concepts": ["languageDimensionId"],
"values": [["Spanish"]]
}
Birden çok boyut filtresi
Bu ısı haritası, sıcaklığı haftanın günü ve günün saatine göre (iki boyut ve bir metrik) gösterir. Bir kullanıcının "Pazartesi akşamı" ve "Cuma öğleden sonra"ya
karşılık gelen hücreleri seçtiğini ve gösterge tablosunun
geri kalanını yalnızca "Pazartesi akşamı" veya "Cuma akşamı"na ait verileri gösterecek şekilde filtrelemek istediğinizi varsayalım. interactionData
öğeniz şöyle görünür:
var interactionData = {
"concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
"values": [
["Monday", "evening"],
["Friday", "afternoon"]
]
}