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

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

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

如要使用社群視覺呈現做為圖表篩選器，您必須：

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"]
  ]
}