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

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

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

如要將社群視覺呈現做為圖表篩選器，請按照下列步驟操作：

  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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

如果報表編輯者未啟用資料的「篩選」互動，數據分析 會忽略 dscc.sendInteraction 傳送的訊息。

追蹤篩選器狀態

數據分析傳送至視覺化效果的 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 物件會定義數據分析篩選資訊主頁的方式。

單一維度篩選器

這張長條圖以視覺化方式呈現各語言的書籍數量 (一個維度和一個指標)。假設使用者選取了與西班牙文書籍對應的長條，而您希望選取項目能篩選資訊主頁中的其他內容，您的 interactionData 應如下所示：

var interactionData = {
  "concepts": ["languageDimensionId"],
  "values": [["Spanish"]]
}

多個維度篩選條件

這張熱視圖會依據星期幾和一天中的時間顯示溫度 (兩個維度和一個指標)。假設使用者選取「週一晚上」和「週五下午」對應的儲存格，而您想篩選其餘的資訊主頁，只顯示「週一晚上」或「週五下午」的資料。您的 interactionData 會如下所示：

var interactionData = {
  "concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
  "values": [
    ["Monday", "evening"],
    ["Friday", "afternoon"]
  ]
}