← Volver a la galería
← 15/30 →
📶

Gráfico de barras agrupadas con filtrado cruzado

Gráfico de barras agrupadas con filtrado cruzado. Basado en el ejemplo oficial de Vega-Lite y adaptado para Deneb en Power BI, con dos categorías y una medida, e interactividad de cross-filter.

Vega-Lite grouped-bar intermedio ✓ Cross-filter

Vista previa en vivo

Render con datos de muestra · Vega/Vega-Lite

🖱️ Cross-filter en vivo — haz clic en una marca y las demás se filtran/atenúan aquí mismo (runtime de Deneb reutilizado, MIT). Igual que en Power BI.

Cargando vista previa…

Vista previa renderizada con el runtime de Deneb · MIT © Daniel Marsh-Patrick

🔽 Descargar .pbix 🔽 Descargar spec .json

🧩 Campos que espera

  1. __0__ Category texto
  2. __1__ group texto
  3. __2__ Value número medida

Arrastra tus campos a Values en este orden.

🎯 Técnica

Motor
Vega-Lite 5.16.3
Marks
bar, text
Power BI
pbiColor

Cómo usarlo en Power BI

  1. Agrega el visual Deneb a tu reporte e ingresa a su editor.
  2. Arrastra tus campos a Values en este orden: Category , group , Value .
  3. Pega el spec (botón «Copiar spec» arriba) en el editor JSON de Deneb.
  4. Mapea tus columnas y ajusta a tu gusto. La interactividad nativa ya viene configurada.
Ver el spec Vega-Lite completo
spec.vega-lite.json 
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.6.2.1",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.16.3"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": true,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Grouped Bar Chart with Cross-filtering",
      "description": "This template is reusable and consists of two categories and one measure. The Grouped Bar Chart is based on the official Vega-Lite example and has been adapted for Deneb in Power BI with enhanced interactivity, including cross-filtering capabilities. Author: Cristobal Salcedo Beltran",
      "author": "Cristobal Salcedo Beltrean",
      "uuid": "9568ac8f-463a-4f9b-9087-abc07ed474bd",
      "generated": "2024-06-28T03:05:30.856Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Category",
        "description": "The primary classification for the data, representing different categories or segments being analyzed.",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "group",
        "description": "A secondary classification within each category, used to differentiate data points within the same category",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Value",
        "description": "The quantitative measurement or metric that is being analyzed and compared across different categories and groups.",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "axisX": {
      "titleFontSize": 18,
      "labelAngle": 0,
      "labelFontSize": 15
    },
    "axisY": {
      "titleFontSize": 15,
      "grid": false,
      "labels": false,
      "ticks": false,
      "domain": false
    }
  },
  "description": "This Grouped Bar Chart is based on the official Vega-Lite example and has been adapted for Deneb in Power BI with added interactivity (cross-filtering). Author: Cristobal Salcedo Beltran. Contact: contacto@csalcedodatabi.com.",
  "data": {
    "name": "dataset"
  },
  "title": {
    "text": "Grouped Bar Chart with Cross-filtering",
    "fontSize": 20
  },
  "transform": [
    {
      "window": [
        {
          "op": "rank",
          "as": "sortGroupCategory"
        }
      ],
      "sort": [
        {
          "field": "__2__",
          "order": "ascending"
        }
      ],
      "groupby": [
        "__0__"
      ]
    },
    {
      "window": [
        {
          "op": "average",
          "field": "__2__",
          "as": "Average_Value"
        }
      ],
      "frame": [
        null,
        null
      ]
    }
  ],
  "layer": [
    {
      "name": "Layer_Bars",
      "mark": "bar",
      "encoding": {
        "color": {
          "field": "__1__",
          "type": "nominal",
          "scale": {
            "range": [
              {
                "expr": "pbiColor(0)"
              },
              {
                "expr": "pbiColor(1)"
              },
              {
                "expr": "pbiColor(2)"
              }
            ]
          }
        },
        "xOffset": {
          "field": "sortGroupCategory"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.3
          },
          "value": 1
        }
      }
    },
    {
      "name": "Layer_TextLabels",
      "mark": {
        "type": "text",
        "dy": {
          "expr": "datum['__2__'] > datum.Average_Value ? 18 : -15"
        },
        "color": {
          "expr": "datum['__2__'] > datum.Average_Value ? 'white' : 'black'"
        },
        "fontSize": 18
      },
      "encoding": {
        "xOffset": {
          "field": "sortGroupCategory"
        },
        "text": {
          "value": {
            "expr": "datum['__2__']__formatted"
          }
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "__0__"
    },
    "y": {
      "field": "__2__",
      "type": "quantitative",
      "title": "__2__"
    }
  }
}
¡Contáctame!