การใช้การแสดงภาพข้อมูลจากชุมชนเป็นตัวกรอง

คุณใช้การแสดงภาพข้อมูลจากชุมชนเป็นตัวกรองแผนภูมิได้ โดยกรองรายงานผ่านการโต้ตอบกับการแสดงภาพข้อมูลจากชุมชน

วิธีการทำงานของตัวกรองแผนภูมิการแสดงภาพข้อมูลจากชุมชน

หากต้องการใช้การแสดงภาพข้อมูลจากชุมชนเป็นตัวกรองแผนภูมิ คุณต้องทำดังนี้

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 หากเครื่องมือแก้ไขรายงานไม่ได้เปิดใช้การโต้ตอบ "กรอง" สำหรับการแสดงภาพ

การติดตามสถานะตัวกรอง

ออบเจ็กต์ data ที่ Looker Studio ส่งไปยังการแสดงข้อมูลผ่านภาพจะให้ข้อมูลเกี่ยวกับการโต้ตอบ

ตัวอย่าง 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 จะกรองหน้าแดชบอร์ด

ตัวกรองมิติข้อมูลเดียว

แผนภูมิแท่งนี้จะแสดงจำนวนหนังสือตามภาษา (1 มิติและ 1 เมตริก) สมมติว่าผู้ใช้เลือกแถบที่สอดคล้องกับหนังสือภาษาสเปน และคุณต้องการกรองส่วนที่เหลือของแดชบอร์ด interactionData จะมีลักษณะดังนี้

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

ตัวกรองมิติข้อมูลหลายรายการ

แผนที่ความหนาแน่นนี้แสดงอุณหภูมิตามวันในสัปดาห์และเวลาของวัน (มีมิติข้อมูล 2 รายการและเมตริก 1 รายการ) สมมติว่าผู้ใช้เลือกเซลล์ที่ตรงกับ "เย็นวันจันทร์" และ "บ่ายวันศุกร์" และคุณต้องการกรองส่วนที่เหลือของหน้าแดชบอร์ดให้แสดงเฉพาะข้อมูลจาก "เย็นวันจันทร์" หรือ "วันศุกร์ตอนบ่าย" ของคุณ interactionData จะมีหน้าตาดังนี้

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