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

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

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

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

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

Data Studio จะไม่สนใจข้อความที่ส่งโดย dscc.sendInteraction หากผู้แก้ไขรายงานไม่ได้เปิดใช้การโต้ตอบ "ตัวกรอง" สำหรับการแสดงภาพ

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

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

ตัวอย่าง 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 จะกำหนดวิธีที่ Data Studio จะกรองแดชบอร์ด

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

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

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

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

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

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