استخدام تصورات المجتمع كعوامل تصفية

يمكنك استخدام التمثيل البصري للمنتدى باعتباره فلتر رسم بياني، مع فلترة التقارير من خلال التفاعلات مع تصور المنتدى.

آلية عمل فلاتر الرسم البياني المرئي للمنتدى

لاستخدام التمثيل المرئي للمنتدى كفلتر رسم بياني، عليك تنفيذ ما يلي:

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 لوحة المعلومات.

فلتر بُعد واحد

يعرض هذا الرسم البياني الشريطي عدد الكتب حسب اللغة (بُعد واحد وبُعد واحد). المقياس). لنفترض أن مستخدمًا قد اختار شريطًا يتوافق مع الكتب باللغة الإسبانية، كنت تريد التحديد لتصفية بقية لوحة المعلومات. سيبدو interactionData كما يلي:

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

فلتر السمات المتعددة

تعرض خريطة التمثيل اللوني هذه درجة الحرارة حسب اليوم من الأسبوع والوقت من اليوم (أبعادان). ومقياس واحد). لنفترض أنّ أحد المستخدمين اختار الخلايا المقابلة لحقل "الاثنين". مساءً" و"الجمعة بعد الظهر"، وأردت تصفية بقية لعرض البيانات من "مساء الاثنين" فقط أو "الجمعة بعد الظهر". ستبدو interactionData على النحو التالي:

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