Barras con etiquetas en Deneb: capas (layer) en Vega-Lite
Pon el valor al final de cada barra usando una segunda capa, el truco detrás de casi toda gráfica a la medida.
2 partes · 3 y 7 min
Curso gratis. Tu Maestro, una IA, .
La gráfica de barras con el número escrito al final de cada barra es de las más pedidas en Deneb, y también es la llave para armar casi cualquier visual a la medida. Hasta ahora, cada especificación que has editado tenía una sola propiedad mark: dibujaba barras, líneas o puntos. Cuando quieres dibujar dos o más marcas en el mismo espacio, como una barra y su etiqueta de texto, o la línea y los dos puntos de la mancuerna que harás en el siguiente módulo, cambias mark por layer (capas).
Una especificación con layer se organiza en dos niveles:
- Afuera de
layer, en el nivel principal, va todo lo que comparten las capas:"data": { "name": "dataset" }y elencodingcon los canales comunes, como qué campo va en cada eje y de qué tipo es (nominal,quantitativeotemporal). - Adentro de
layer, entre corchetes[ ], va una lista de objetos. Cada objeto es una capa con su propia marca (mark) y unencodingúnicamente para los canales que esa capa necesita por su cuenta.
Esta herencia te ahorra repetir código y evita errores: escribes la sucursal en y y la suma de ventas en x una sola vez afuera, y todas las capas toman esas mismas coordenadas automáticamente.
Barras horizontales con su valor al final
Ejemplo resuelto · 4 pasos
La directora quiere ver las ventas del semestre por sucursal, ordenadas de mayor a menor, con el monto escrito al final de cada barra para leer la cifra exacta de un vistazo.
Piensa el siguiente paso por tu cuenta y luego ábrelo para comparar.
Buen lugar para parar. Después: parte 2 de 2 · 7 min
Cuando agregues una capa nueva dentro de layer, recuerda que en JSON los elementos de una lista [ ] se separan con una coma. La primera capa { "mark": "bar" } lleva una coma justo después de su llave de cierre }, antes de abrir la llave { de la capa de texto.
Si al escribir la segunda capa la gráfica desaparece, pásale tu especificación a tu Maestro para encontrar la coma o llave que falta.
Consejo: Formatos de Power BI en Deneb
En Vega-Lite, el formato ,.0f convierte 1512543 en 1,512,543. Cuando trabajas dentro de Deneb en Power BI, también puedes usar las cadenas de formato propias de Power BI agregando "formatType": "pbiFormat". Por ejemplo, puedes escribir "format": "$#,0" en tu etiqueta o "axis": { "format": "$#0,,,.0bn", "formatType": "pbiFormat" } en un eje para que tu visual formatee las cifras igual que el resto de tu reporte.
Inténtalo
Con tus etiquetas puestas, el eje x ya sobra: los números están escritos. Agrega "axis": null dentro del x de afuera y compara. Muchas gráficas para juntas se leen mejor así. Una buena versión final tiene las barras ordenadas, el monto al final de cada una y nada que el ojo tenga que ir a buscar a otro lado.
Si quieres poner el monto adentro de la barra en lugar de afuera, pregúntale a tu Maestro qué cambiar.