使用社群視覺呈現做為篩選條件

您可以使用社群視覺呈現做為圖表篩選器，透過與社群視覺呈現的互動篩選報表。

社群視覺呈現圖表篩選器的運作方式

如要將社群視覺呈現做為圖表篩選器，您必須完成以下操作：

1. 設定 config.interactions 屬性
2. 編寫程式碼，以使用篩選器資訊呼叫 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);
};

注意： 請確認 interactionId 與設定中的 config.interactions[].id 相符。

如果報表編輯器尚未啟用圖表的「篩選」互動功能，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，圖表目前正在篩選資訊主頁的其他元件。

重點提示： 如果您的視覺化呈現提供篩選器狀態的視覺化註解 (例如醒目顯示值)，程式碼應檢查 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"]
  ]
}