← Volver a la galería
← 16/30 →
🧱

Gráfico de barras apiladas

Gráfico de barras apiladas. Basado en un ejemplo oficial de Vega-Lite y adaptado para Deneb en Power BI; ten en cuenta que la interactividad de cross-filter es limitada cuando se usa ‘aggregate’.

Vega-Lite stacked-bar intermedio ✓ Tooltip ✓ Context menu ✓ Selección

Vista previa en vivo

Render con datos de muestra · Vega/Vega-Lite

🖱️ Haz clic en una categoría de la leyenda para resaltar su serie; las demás se atenúan. Funciona en vivo aquí y en Power BI (selección de Deneb).

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__ Date dateTime
  2. __1__ Category texto

Arrastra tus campos a Values en este orden.

🎯 Técnica

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

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: Date , Category .
  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": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Stacked Bar Chart",
      "description": "Based on an official Vega-Lite example and adapted for use in Deneb within Power BI, it should be noted that cross-filtering interactivity is limited when using 'aggregate'. Author: Cristobal Salcedo Beltran. Contact: contacto@csalcedodatabi.com.",
      "author": "Cristobal Salcedo Beltran",
      "uuid": "68fcd6b9-6d3f-45a9-b0db-88f453cbc2df",
      "generated": "2024-07-11T02:41:35.472Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Date",
        "description": "",
        "type": "dateTime",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Category",
        "description": "",
        "type": "text",
        "kind": "column"
      }
    ]
  },
  "config": {
    "axisY": {
      "labelFontSize": 14,
      "tickCount": 6,
      "gridDash": [
        4,
        8
      ]
    },
    "axisX": {
      "labelFontSize": 14,
      "offset": 1,
      "labelExpr": "[pbiFormat(datum.value,'MMM'),month(datum.value)===0? pbiFormat(datum.value,'yyyy'):'']"
    },
    "legend": {
      "orient": "top",
      "labelFontSize": 18
    }
  },
  "description": "Based on an official Vega-Lite example and adapted for use in Deneb within Power BI, it should be noted that cross-filtering interactivity is limited when using 'aggregate'. Author: Cristobal Salcedo Beltran. Contact: contacto@csalcedodatabi.com.",
  "data": {
    "name": "dataset"
  },
  "title": {
    "text": "Weather Distribution by Month",
    "fontSize": 30
  },
  "name": "Mark_BarChart",
  "params": [
    {
      "name": "legendSel",
      "select": {
        "type": "point",
        "fields": [
          "__1__"
        ]
      },
      "bind": "legend"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "timeUnit": "month",
      "field": "__0__",
      "type": "ordinal",
      "title": null
    },
    "y": {
      "aggregate": "count",
      "type": "quantitative",
      "title": null
    },
    "color": {
      "field": "__1__",
      "type": "nominal",
      "scale": {
        "domain": [
          "sun",
          "fog",
          "drizzle",
          "rain",
          "snow"
        ],
        "range": [
          {
            "expr": "pbiColor(0,0.3)"
          },
          {
            "expr": "pbiColor(1,0.1)"
          },
          {
            "expr": "pbiColor(2,0.1)"
          },
          {
            "expr": "pbiColor(3,0.1)"
          },
          {
            "expr": "pbiColor(4,0.1)"
          }
        ]
      },
      "title": null
    },
    "opacity": {
      "condition": {
        "param": "legendSel",
        "value": 1
      },
      "value": 0.25
    }
  }
}
¡Contáctame!