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ách hoạt động của 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:

  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 các lượt tương tác

Nếu hình ảnh trực quan của bạn hỗ trợ các hoạt động tương tác, thì bạn nên xác định các hoạt động đó trong cấu hình. 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ụ 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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

Data Studio sẽ bỏ qua các thông báo do dscc.sendInteraction gửi nếu người chỉnh sửa báo cáo chưa bật các hoạt động tương tác "bộ 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à Data Studio gửi đến hình ảnh trực quan của bạn cung cấp thông tin về các lượt tương tác.

Ví dụ 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 phải là giá trị 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 tạo interactionData

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

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

Biểu đồ thanh này trực quan 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 sách bằng tiếng Tây Ban Nha và bạn muốn lựa chọn 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 cho biết nhiệt độ theo ngày trong tuần và thời gian trong ngày (2 phương diện và 1 chỉ số). Giả sử người dùng chọn các ô tương ứng với "Tối thứ Hai" và "Chiều thứ Sáu", còn bạn muốn lọc phần còn lại của trang tổng quan để chỉ hiện dữ liệu từ "Tối thứ Hai" hoặc "Chiều thứ Sáu".interactionData của bạn sẽ trông như sau:

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