Community-Visualisierungen als Filter verwenden

Sie können Ihre Community-Visualisierung als Diagrammfilter verwenden und den Bericht durch Interaktionen mit Ihrer Community-Visualisierung filtern.

Funktionsweise von Diagrammfiltern für Community-Visualisierungen

Wenn Sie Ihre Community-Visualisierung als Diagrammfilter verwenden möchten, müssen Sie Folgendes tun:

1. config.interactions-Property konfigurieren
2. Schreiben Sie Code, der dscc.sendInteraction() mit den Filterinformationen aufruft.

Hinweis :Interaktionen werden nur im Ansichtsmodus unterstützt.

Interaktionen definieren

Wenn Ihre Visualisierung Interaktionen unterstützt, sollten diese in der Konfiguration definiert sein. Wenn diese Option definiert ist, wird im Eigenschaftenbereich ein Kästchen angezeigt.

Beispiel für config.interactions:

{
  "data": ...,
  "style": ...,
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ]
}

Code für einen Filter schreiben

Mit dscc.sendInteraction() können Sie Nutzerinteraktionen einer Filteraktion zuordnen.

Beispiel:

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

Hinweis :Achten Sie darauf, dass interactionId mit einem config.interactions[].id in Ihrer Konfiguration übereinstimmt.

Data Studio ignoriert Nachrichten, die von dscc.sendInteraction gesendet werden, wenn der Berichtseditor keine Filterinteraktionen für Ihre Visualisierung aktiviert hat.

Filterstatus im Blick behalten

Das data-Objekt, das Data Studio an Ihre Visualisierung sendet, enthält Informationen zu Interaktionen.

Beispiel für data.interactions:

"onClick": {
  "value": {
    "type": "FILTER",
      "data": {
      "concepts": [
        "qt_h6oibrb6wb",
        "qt_i6oibrb6wb"
      ],
        "values": [
          [
            "Afternoon",
            "Sunday"
          ],
          [
            "Afternoon",
            "Thursday"
          ],
          [
            "Morning",
            "Tuesday"
          ]
        ]
    }
  },
  "supportedActions": [
    "FILTER"
  ]
}

Wenn value.data nicht undefiniert ist, werden derzeit andere Komponenten des Dashboards durch die Visualisierung gefiltert.

Wichtig: Wenn in Ihrer Visualisierung der Filterstatus visuell dargestellt wird, z. B. durch Hervorheben eines Werts, sollte in Ihrem Code value.data geprüft werden, damit die Visualisierung korrekt gerendert wird.

Beispiel:

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 wird erstellt

Das interactionData-Objekt definiert, wie Ihr Dashboard in Data Studio gefiltert wird.

Filter für einzelne Dimensionen

In diesem Balkendiagramm wird die Anzahl der Bücher nach Sprache dargestellt (eine Dimension und ein Messwert). Angenommen, ein Nutzer hat den Balken für Bücher auf Spanisch ausgewählt und Sie möchten, dass der Rest des Dashboards entsprechend gefiltert wird. Ihr interactionData würde so aussehen:

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

Filter für mehrere Dimensionen

Diese Heatmap zeigt die Temperatur nach Wochentag und Tageszeit (zwei Dimensionen und ein Messwert). Angenommen, ein Nutzer hat die Zellen für „Montagabend“ und „Freitagnachmittag“ ausgewählt und Sie möchten den Rest des Dashboards so filtern, dass nur Daten von „Montagabend“ oder „Freitagnachmittag“ angezeigt werden. Ihr interactionData würde so aussehen:

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