Sử dụng hình ảnh dữ liệu cộng đồng làm bộ lọc

Bạn có thể sử dụng hình ảnh dữ liệu cộng đồng làm bộ lọc biểu đồ, lọc báo cáo thông qua các lượt tương tác với hình ảnh dữ liệu cộng đồng của bạn.

Cách hoạt động của các bộ lọc biểu đồ hình ảnh dữ liệu cộng đồng

Để sử dụng hình ảnh dữ liệu cộng đồng làm bộ lọc biểu đồ, bạn cần phải:

  1. Định cấu hình thuộc tính config.interactions
  2. Viết mã gọi dscc.sendInteraction() bằng thông tin bộ lọc.

Xác định lượt tương tác

Nếu hình ảnh của bạn hỗ trợ các lượt tương tác, các lượt tương tác đó phải được xác định trong cấu hình của bạn. Khi được xác định, một hộp đánh dấu sẽ xuất hiện trong bảng thuộc tính.

Ví dụ về config.interactions:

{
  "data": ...,
  "style": ...,
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ]
}

Viết mã cho bộ lọc

Sử dụng dscc.sendInteraction() để liên kết lượt tương tác của người dùng với một thao tác lọc.

Ví dụ:

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 sẽ bỏ qua thông báo do dscc.sendInteraction gửi nếu trình chỉnh sửa báo cáo chưa bật tính năng tương tác "lọc" cho hình ảnh trực quan của bạn.

Theo dõi trạng thái bộ lọc

Đối tượng data mà Looker Studio gửi đến hình ảnh trực quan của bạn sẽ cung cấp thông tin về các lượt tương tác.

Ví dụ về data.interactions:

"onClick": {
  "value": {
    "type": "FILTER",
      "data": {
      "concepts": [
        "qt_h6oibrb6wb",
        "qt_i6oibrb6wb"
      ],
        "values": [
          [
            "Afternoon",
            "Sunday"
          ],
          [
            "Afternoon",
            "Thursday"
          ],
          [
            "Morning",
            "Tuesday"
          ]
        ]
    }
  },
  "supportedActions": [
    "FILTER"
  ]
}

Nếu value.data không xác định, thì hình ảnh trực quan hiện đang lọc các thành phần khác của trang tổng quan.

Ví dụ:

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()
  }
}

Đang xây dựng interactionData

Đối tượng interactionData xác định cách Looker Studio sẽ lọc trang tổng quan của bạn.

Bộ lọc một phương diện

Biểu đồ thanh này minh hoạ số lượng sách theo ngôn ngữ (một phương diện và một chỉ số). Giả sử người dùng chọn thanh tương ứng với các cuốn sách bằng tiếng Tây Ban Nha và bạn muốn thanh này lọc phần còn lại của trang tổng quan. interactionData của bạn sẽ có dạng như sau:

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

Bộ lọc nhiều phương diện

Bản đồ nhiệt này hiển thị nhiệt độ theo ngày trong tuần và thời gian trong ngày (2 phương diện và một chỉ số). Giả sử một người dùng chọn các ô tương ứng với "Tối thứ Hai" và "Chiều thứ Sáu", và bạn muốn lọc các ô còn lại của trang tổng quan để chỉ hiển thị dữ liệu của "Tối thứ Hai" hoặc "chiều thứ Sáu".interactionData của bạn sẽ có dạng như sau:

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