您可以使用社群視覺呈現做為圖表篩選器,透過與社群視覺呈現的互動篩選報表。
社群視覺呈現圖表篩選器的運作方式
如要將社群視覺呈現做為圖表篩選器,您必須完成以下操作:
- 設定
config.interactions
屬性 - 編寫程式碼,以使用篩選器資訊呼叫
dscc.sendInteraction()
。
定義互動
如果您的視覺化功能支援互動,則應在設定中定義。定義後,屬性面板中會顯示核取方塊。
config.interactions
範例:
{
"data": ...,
"style": ...,
"interactions": [
{
"id": "interactionsConfigId",
"supportedActions": ["FILTER"]
}
]
}
編寫篩選器的程式碼
使用 dscc.sendInteraction()
,將使用者互動與篩選器動作建立關聯。
示例:
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);
};
如果報表編輯器尚未啟用圖表的「篩選」互動功能,Looker Studio 會忽略由 dscc.sendInteraction
傳送的訊息。
追蹤篩選器狀態
Looker Studio 傳送至視覺化的 data
物件會提供互動相關資訊。
data.interactions
範例:
"onClick": {
"value": {
"type": "FILTER",
"data": {
"concepts": [
"qt_h6oibrb6wb",
"qt_i6oibrb6wb"
],
"values": [
[
"Afternoon",
"Sunday"
],
[
"Afternoon",
"Thursday"
],
[
"Morning",
"Tuesday"
]
]
}
},
"supportedActions": [
"FILTER"
]
}
如未定義 value.data
,圖表目前正在篩選資訊主頁的其他元件。
示例:
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
interactionData
物件可定義 Looker Studio 篩選資訊主頁的方式。
單一維度篩選器
這個長條圖會依語言呈現書籍數量 (一個維度和一個指標)。假設使用者選取與西班牙文書籍對應的長條,且您想篩選資訊主頁的其餘部分。您的 interactionData
看起來會像這樣:
var interactionData = {
"concepts": ["languageDimensionId"],
"values": [["Spanish"]]
}
多個維度篩選器
此熱視圖會依星期幾和時段 (兩個維度和一個指標) 顯示溫度。假設使用者選取與「週一傍晚」和「週五下午」對應的儲存格,而您想要篩選資訊主頁的其餘部分,只顯示「週一晚上」或「週五下午」的資料,您的 interactionData
看起來會像這樣:
var interactionData = {
"concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
"values": [
["Monday", "evening"],
["Friday", "afternoon"]
]
}