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:
- Định cấu hình thuộc tính
config.interactions
- 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"]
]
}