> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/doughnut.md).

# Visualización de anillo

Visualiza una lectura del sensor como un anillo proporcional con la visualización de anillo en el widget de últimos datos — ideal para %.

<figure><img src="https://3373664356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtNQh1wBSHSaknslMdOXm%2Fuploads%2Fgit-blob-0e97f37f6f60ae86e1a713afe5d529176348e8f1%2Flast-data-doughnut.jpg?alt=media" alt="Last Data widget using the Doughnut display type"><figcaption></figcaption></figure>

La visualización Doughnut dibuja la lectura como un anillo que se llena de forma proporcional entre un mínimo y un máximo que defines, con el valor actual en el centro. A simple vista responde «¿cuánto falta para llegar?» — un cuarto lleno, casi al máximo — sin que nadie lea el número.

Encaja con cualquier lectura que se sitúe dentro de un rango conocido: un nivel de llenado, un porcentaje, una capacidad, un valor que debería estar en algún punto dentro de una banda operativa. El relleno del anillo hace inmediata la posición dentro de ese rango.

## Cuándo elegirlo

* Una lectura con un rango operativo definido en la que importa la proporción — capacidad de un depósito, carga de la batería, utilización frente a un límite.
* Un mosaico del panel en el que el operador debería captar de un vistazo bajo / medio / alto, no interpretar dígitos.
* En cualquier lugar donde un porcentaje o una proporción se lea más claramente como un anillo relleno que como una cifra.

Dondequiera que una lectura tenga un mínimo y un máximo significativos, Doughnut la convierte en una forma — deja que tus propias métricas sugieran dónde encaja.

## Configurar una visualización Doughnut

Aquí tienes una configuración completa para un caso real: un anillo que muestra la temperatura de una oficina y si resulta confortable. Un sensor de temperatura informa de la habitación en °C. Una temperatura no es como un depósito: no tiene un «vacío» ni un «lleno» naturales, así que no existe un 0 y un 100 obvios. El anillo aún necesita un mínimo y un máximo, así que eliges una ventana lo bastante amplia para abarcar toda la temperatura que la habitación podría alcanzar de forma realista: para una habitación de casa, aproximadamente de -5 °C a +40 °C. Este es un ejemplo: Doughnut encaja con cualquier lectura que quieras ver como una proporción de un rango; solo cambian el dispositivo y los números.

1. Abre el panel en modo de edición y haz clic en **Últimos datos** en el selector de widgets. El panel de ajustes se abre en la pestaña **Fuente de datos** sin fuentes de datos todavía.
2. Haz clic en **Añadir fuente de datos**. Un **Fuente de datos 1** bloque aparece.
3. En el bloque, haz clic en **Elegir dispositivo** y selecciona el sensor de temperatura.
4. Haz clic en **Añadir métrica**. Aparece una fila de métricas.
5. En la fila, establece **Tipo de dato** en **Telemetría**, elige la lectura de temperatura en **Métrica del dispositivo**, y selecciona un **Icono**.

   > **Esta visualización necesita un número.** La **Métrica del dispositivo** lista ofrece todos los tipos de métricas, pero un gauge se rellena según una escala — elige aquí una lectura numérica; un valor de texto no numérico se interpreta como 0. (Para mostrar texto o un valor de encendido/apagado tal cual, usa la [visualización de valor](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/number.md).) Para cambiar cómo se almacena una métrica, abre **Dispositivos → Métricas** — consulta [Métricas](/kilo-docs-es/kilo-iot-server/devices/metric-templates.md).
6. Haz clic en **Condiciones: N** para abrir el modal de Condiciones. Establece un **Color predeterminado** — el color al que vuelve la lectura cuando ninguna de tus condiciones coincide con el valor actual — luego, para cada banda, haz clic en **Añadir condición** y completa la fila — introduce un **Nombre de la condición**, establece **Tipo de dato** en **Número** (el tipo de datos de la propia condición, no el de la fila de la métrica), porque la temperatura de una habitación de casa oscila de forma realista entre -5 °C y 40 °C, introduce **Desde** -5 (lo más frío que esperarías) y **Hasta** 40 (lo más caliente), y elige un **Color**. Luego puedes introducir los niveles de color. Por ejemplo:

   Trabajando desde el más frío:

   * «Demasiado frío» — **Desde** -5, **Hasta** 15 — rojo
   * «Fresco» — **Desde** 15, **Hasta** 18 — amarillo
   * «Confortable» — **Desde** 18, **Hasta** 24 — verde
   * «Cálido» — **Desde** 24, **Hasta** 28 — amarillo
   * «Demasiado caliente» — **Desde** 28, **Hasta** 40 — rojo

   Haz clic en **Guardar** para cerrar el modal.
7. Haz clic en **Después** para abrir el panel **Apariencia** .
8. Introduce un **Nombre del widget** — por ejemplo «Temperatura de la oficina» — y un opcional **Descripción**.
9. Bajo **En**Tipo de widget **Dona**. Un **Aparece la sección** Rango de valores
10. para la métrica. **Valor mínimo** en **-5** y **Valor máximo** en **40** — la ventana que elegiste para una habitación de casa. El anillo se llena para mostrar dónde se sitúa la temperatura actual en ese tramo de -5 a 40 °C, y la condición en la que cae la lectura le pone el color.
11. Activa **Mostrar leyenda de datos** si te resulta útil, luego haz clic en **Guardar**.

El anillo muestra la temperatura como una posición en el rango elegido y solo se vuelve verde dentro de la banda confortable. Los mismos pasos sirven para cualquier lectura con un mínimo y un máximo sensatos: solo cambian el dispositivo, la **Valor mínimo**/**Valor máximo**, y las condiciones cambian. Doughnut se gana su lugar cuando la pregunta es «cuánto ha avanzado dentro del rango»; para una temperatura que solo quieres leer, un Número o un Medidor suele ser la visualización más natural.

## Ejemplos prácticos

**El mismo sensor, una configuración completamente distinta — un refrigerador** Un refrigerador usa el *mismo tipo* de sensor de temperatura que la oficina anterior, y sin embargo cada número es distinto — porque la ventana correcta depende de lo que estés midiendo. La banda segura de un frigorífico es aproximadamente de 0 a 5 °C, así que ajustas la escala un poco más amplia que esa banda, de modo que un frigorífico que falle y se caliente aún se muestre en el anillo: **Valor mínimo** **-5**, **Valor máximo** **15**. Después construyes tres condiciones: «Demasiado frío» — De -5 a 0 — azul; «Seguro» — De 0 a 5 — verde; «Demasiado caliente» — De 5 a 15 — rojo. Mismo hardware, mismos pasos — solo cambian la ventana y las bandas, porque «bueno» significa algo completamente distinto en un frigorífico que en una oficina. Ese es el corazón de las condiciones: decides qué significa cada lectura en su propio contexto.

**Un nivel de llenado** Doughnut encaja de forma natural con un depósito o una batería. Un sensor de nivel en un tanque de 5.000 litros informa del contenido en litros, así que 0 L es un tanque vacío y 5.000 L está lleno — **Valor mínimo** 0, **Valor máximo** 5000 — con condiciones verde De 3000 a 5000, amarillo De 1000 a 3000, rojo De 0 a 1000. El anillo se vacía visiblemente a medida que se vacía el tanque.

## Véase también

* [Widget de últimos datos](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — referencia de configuración completa y los otros tipos de visualización
* [Condiciones](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Reglas de color numéricas De/Para para cada métrica
* Otros tipos de visualización: [Valor](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/number.md) · [Pastel](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/pie.md) · [Medidor](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/gauge.md) · [Tubo](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/tube.md) · [Medidor radial](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/radial-gauge.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.kiloiot.io/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget/doughnut.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
