Blog · Custom Web Controls
Los 9 mejores gráficos circulares, Sankey y mapas de calor Custom Web Control para WinCC Unified y WinCC V8 (gratis)
WinCC Unified trae objetos de curvas y de barras, pero cuando quieres un gráfico circular, un diagrama de Sankey o un mapa de calor, un Custom Web Control es el atajo. Por eso, en noviembre de 2026, abrimos todos los gráficos de tarta, donut, radar, Sankey, heatmap, embudo, dispersión y burbujas Custom Web Control del catálogo de HMIx, diecisiete candidatos, miramos cada vista previa de cerca, leímos todas las fichas y nos quedamos con los nueve que pondríamos sin dudar en una pantalla de WinCC Unified o WinCC V8. Todos gratis, todos empaquetados como ZIP de CWC y todos con sus propiedades de datos nombradas en la ficha o en sus capturas de TIA Portal.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Gráfico circular
- Diagrama de Sankey
- Mapa de calor
Elección rápida
¿Vas con prisa? Salta directamente al gráfico que necesitas.
- 01El mejor en general (tarta o donut)Pie Chart
- 02El mejor para desgloses de dos niveles (dos anillos)Nested Pie Chart
- 03El mejor para comparar real frente a referenciaRadar Chart
- 04El favorito del público: el diagrama de Sankey más descargadoSankey Diagram
- 05El mejor para desgloses energéticos con valores en cada nodoHousehold Energy Sankey Diagram
- 06El mejor para mapas de carga por turno y producciónHeatmap
- 07El mejor para patrones semanales de 24 × 7Heatmap Grid
- 08El mejor para el rendimiento y las pérdidas etapa a etapa (embudo)Funnel
- 09El mejor para correlaciones entre dos variablesScatter Chart
Por qué un gráfico circular, un Sankey o un mapa de calor Custom Web Control cubren un hueco real
Toda planta tiene preguntas que una curva responde mal. ¿En qué se fue el turno: producción, cambio de formato, paro o averías? ¿Qué línea se come la mayor parte de la energía? ¿Qué hora de la semana va siempre más cargada? Un gráfico circular responde la primera, un diagrama de Sankey la segunda y un mapa de calor la tercera, y ninguno de ellos es para lo que están pensados los objetos estándar de WinCC.
Ahí entra un gráfico Custom Web Control (CWC). Un CWC es una pequeña aplicación web, HTML, CSS y JavaScript empaquetados en un ZIP, que WinCC Unified (TIA Portal) y WinCC V8 ejecutan dentro de la pantalla. La mayoría de los gráficos CWC reciben sus datos como array o como cadena JSON en una propiedad como slices, nodes o heatmapData: tus variables HMI y tus scripts ponen los números y el control los dibuja. Muchos disparan además eventos, como SliceClicked o CellClicked, para que un clic en un sector o en una celda abra la pantalla de detalle.
Qué hace que un gráfico Custom Web Control merezca la descarga
Antes de la lista, la vara de medir. Esto es lo que buscamos, más o menos en el orden en que nos molesta que falte:
- El gráfico adecuado para la pregunta. Las partes de un todo van en una tarta, los flujos en un Sankey, los patrones en el tiempo en un mapa de calor y varias variables frente a una referencia en un radar. Un gráfico bonito que responde a la pregunta equivocada es ruido.
- Legible en un panel. Etiquetas sin cortar, valores o porcentajes que se lean de verdad y una escala de color que se explique sola. Los degradados vistosos no sustituyen a un número legible.
- Un contrato de datos limpio. Los datos en una propiedad documentada (
slices,links,heatmapData,points), para saber exactamente qué tienen que escribir tus variables o tus scripts. - Interacción que lleva a algún sitio. Un evento al hacer clic en un sector, un nodo o una celda convierte un dibujo en navegación. Las fichas que solo cuentan sus propiedades pasaron a las menciones de honor.
- Un campeón por trabajo. Una tarta o donut, una tarta de dos anillos, un radar, dos diagramas de Sankey, dos mapas de calor, un embudo y un gráfico de dispersión: preguntas distintas, herramientas distintas.
Cómo los elegimos (y qué no hicimos)
En noviembre de 2026 buscamos en el catálogo de HMIx todos los Custom Web Control gratuitos que dibujan gráficos de tarta, donut, radar, Sankey, mapas de calor, embudo, dispersión o burbujas. Los gráficos de barras y de tendencia ya tienen sus propios artículos, así que se quedaron fuera. De cada candidato miramos su vista previa real (no la portada del catálogo con el título enorme encima), leímos su ficha y, cuando el creador las publicó, las capturas de TIA Portal de su galería, para ver qué propiedades, eventos y métodos documenta. Las descargas solo sirvieron para desempatar.
Los controles cuya ficha no nombra sus propiedades pasaron a las menciones de honor. Descartamos un gráfico de burbujas cuyo eje dice «Efficiency (%)» y llega a 70 000, y un gráfico que ya elegimos en nuestro artículo de gráficos de barras. Y un aviso honesto: juzgamos vistas previas y documentación; no ejecutamos estos controles en un Runtime real. Se generaron con IA y cada ficha recuerda que hay que probarlos en tu propio proyecto de TIA Portal antes de llevarlos a producción.
Los 9 mejores gráficos circulares, Sankey, mapas de calor y otros Custom Web Control, uno a uno
Cada entrada muestra la vista previa real, lo que nos gustó, lo que conviene saber y las propiedades que nombra su ficha, seguido de la miniatura del catálogo: haz clic en ella para abrir la ficha y descargar el gráfico gratis.
01El mejor en general (tarta o donut)
Pie Chart
Si solo pudiéramos quedarnos con uno, sería este, porque responde a la pregunta que más te van a hacer: ¿en qué se fue el tiempo? La vista previa muestra un donut oscuro y limpio repartido en Production, Idle, Maintenance, Fault y Setup, en azul, gris, naranja, rojo y morado, con una leyenda discreta a la derecha. Es justo el reparto de estados de máquina que necesita una pantalla de OEE, y no grita.
Tarta o donut, tú decides: innerRadius y outerRadius son porcentajes, así que con un radio interior de cero tienes una tarta clásica. Los datos van en el array slices, title añade un encabezado, showLegend y legendPosition (arriba, abajo, izquierda o derecha) colocan la leyenda y backgroundColor lo adapta a tu tema. Según su ficha, los tooltips muestran cada valor con su unidad, SliceClicked permite que un clic abra el detalle de un estado y los métodos refresh y resetValues limpian el gráfico en un cambio de lote.
Lo que nos gusta
- Tarta o donut con dos propiedades en porcentaje
- Aspecto tranquilo y legible en pantallas oscuras
- Evento de clic por sector para profundizar
A tener en cuenta
- En la vista previa no hay valores ni porcentajes en los sectores: el operador tiene que pasar el ratón o leer la leyenda
- La ficha cuenta ocho propiedades pero nombra siete: comprueba en TIA Portal la de la unidad
Propiedades enlazables
- title
- slices
- innerRadius
- outerRadius
- showLegend
- legendPosition
- backgroundColor
02El mejor para desgloses de dos niveles (dos anillos)
Nested Pie Chart
Una tarta te dice que producción consume la mayor parte de la energía; esta te dice además qué línea. La vista previa, «Energy Consumption Breakdown», tiene una tarta interior con tres departamentos (Production, Infrastructure y Logistics) y un anillo exterior con sus equipos, cada uno con una etiqueta que muestra el valor y el porcentaje: «Assembly Line A: 450, 33.33%», «HVAC Unit 1: 120, 8.89%» y así sucesivamente.
Su ficha anuncia 17 propiedades y nombra doce. Los datos van en innerSectors y outerSectors; la geometría, en innerRadius, outerRadiusStart y outerRadiusEnd; los textos, en titleText, subtitleText y unitLabel; y las etiquetas, en labelRichBackgroundColor y labelLineLength. theme cambia entre claro y oscuro, animationDuration suaviza las actualizaciones, SectorClicked informa de los clics y resetSelection los borra.
Lo que nos gusta
- Dos niveles de detalle en un solo gráfico
- Valor y porcentaje en cada sector exterior
- Temas claro y oscuro incluidos
A tener en cuenta
- Las etiquetas son pequeñas en la vista previa: dale un recuadro grande o menos sectores
- Cinco de sus 17 propiedades no se nombran en la ficha
Propiedades enlazables
- innerSectors
- outerSectors
- titleText
- subtitleText
- unitLabel
- theme
- innerRadius
- outerRadiusStart
- outerRadiusEnd
- labelRichBackgroundColor
- labelLineLength
- animationDuration
03El mejor para comparar real frente a referencia
Radar Chart
Un gráfico de radar es la forma más rápida de ver si una máquina se comporta como su referencia. Este dibuja seis ejes (eficiencia, velocidad, carga, presión, vibración y temperatura) sobre una rejilla hexagonal oscura, con un polígono cian relleno para «Actual Status» y otro amarillo discontinuo para «Reference». Donde las dos formas se separan, hay algo que mirar.
Sus siete propiedades están todas nombradas en la ficha. indicators define los ejes y su máximo, series lleva los datos, chartTitle y showLegend dan contexto, labelColor y backgroundColor le dan estilo y animationDuration suaviza las transiciones. PointClicked indica qué punto se ha pulsado, útil para abrir la tendencia de esa variable.
Lo que nos gusta
- Real y referencia de un vistazo
- Interfaz corta y totalmente documentada
- Colores tranquilos y nombres de eje legibles
A tener en cuenta
- Cada eje tiene su propio máximo: escala tus valores con sentido o la forma engañará
- Sin título en la vista previa: rellena
chartTitlepara que el operador sepa de qué máquina se trata
Propiedades enlazables
- indicators
- series
- chartTitle
- showLegend
- labelColor
- backgroundColor
- animationDuration
04El favorito del público: el diagrama de Sankey más descargado
Sankey Diagram
De los diagramas de Sankey de nuestra búsqueda, este es el que más se descarga (16 descargas y dos reseñas de cinco estrellas en noviembre de 2026). La vista previa que mostramos es un panel oscuro «ENERGY FLOW ANALYSIS»: dos líneas alimentan cuatro máquinas, que se reparten en seis salidas, con cintas anchas y translúcidas cuyo grosor sigue al valor. Otra imagen de la galería muestra un efecto al pasar el ratón que atenúa todo menos un enlace y lo rotula «Machine 3 -- Spare 1 10».
Su ficha solo dice que tiene nueve propiedades y dos eventos, pero la galería incluye dos capturas de la ventana de inspección de TIA Portal que despejan la duda. La estructura vive en dos arrays: nodes (cada elemento tiene un name) y links (cada uno con source, target y value). Alrededor, title y showTitle para la cabecera, nodeWidth y nodeGap para las columnas, y curveness y linkOpacity para las cintas. Ver los arrays editados en TIA Portal es justo la tranquilidad que quieres antes de enlazar.
Lo que nos gusta
- Estructura de datos visible en capturas reales de TIA Portal
- Modelo sencillo: una lista de nombres y otra de enlaces origen-destino-valor
- El resaltado al pasar el ratón hace legible un diagrama cargado
A tener en cuenta
- La primera imagen de la galería corta las etiquetas de la derecha («Production I», «HVAC Syste»): déjales sitio
- Los dos eventos no se nombran en la ficha: compruébalos en la documentación incluida
Propiedades enlazables
- nodes
- links
- title
- showTitle
- nodeWidth
- nodeGap
- curveness
- linkOpacity
05El mejor para desgloses energéticos con valores en cada nodo
Household Energy Sankey Diagram
El diagrama de Sankey más informativo del catálogo, y el único que escribe el valor en cada nodo. Total Energy (19 000 kWh) se reparte en Electricity (10 800) y Natural Gas (8200), después en calefacción, agua caliente, refrigeración, electrodomésticos, iluminación y electrónica, y por último en frigorífico, lavadora y secadora, lavavajillas, ordenador y televisión. Hemos sumado: cada nivel de la demo cuadra, que ya es más de lo que consiguen muchos informes energéticos.
Con 28 propiedades es también el más configurable. La ficha nombra ShowLabels y ShowValues para los textos, FlowOpacity para las cintas, AnimationEnabled para las transiciones, nodeWidth y nodePadding para la disposición y propiedades de margen como marginTop y marginRight para que no se corten las etiquetas. Dispara NodeClicked y FlowSelected, y los métodos updateFlowValue, UpdateData y SetAnimationSpeed lo refrescan desde tus scripts.
Lo que nos gusta
- Valores en kWh en cada nodo, legibles sin pasar el ratón
- Tres niveles de desglose que cuadran
- Muy configurable, con eventos en nodos y flujos
A tener en cuenta
- Está pensado para una vivienda, y su ficha nombra fuentes y usos como
TotalElectricity,GasHeatingyRefrigerator: comprueba en la documentación hasta dónde puedes renombrarlos para una planta - Algunas etiquetas («Water Heating», «Appliances») quedan encima de las cintas
Propiedades enlazables
- ShowLabels
- ShowValues
- FlowOpacity
- AnimationEnabled
- nodeWidth
- nodePadding
- marginTop
- marginRight
Household Energy Sankey Diagram
Gratis · WinCC Unified y V8 · CWC (.zip)
06El mejor para mapas de carga por turno y producción
Heatmap
Donde el Heatmap Grid enseña una semana entera hora a hora, este se conforma con ser pequeño y preciso. La vista previa que mostramos es una cuadrícula «Production Load Analysis» de tres días por tres turnos (00:00, 08:00 y 16:00) con el valor escrito en cada celda, un contorno blanco en la celda seleccionada, un tooltip con «Value: 50%» y una escala de color con tiradores debajo. Su primera imagen de galería es la versión grande: siete días por 24 horas, de azules fríos por la noche a naranja a mediodía.
Es el mejor documentado de los dos mapas de calor. La ficha nombra startColor y endColor para el degradado, minValue y maxValue para su rango, showValueLabels para los números en las celdas, unitLabel para los tooltips, backgroundColor, y xAxisLabels y yAxisLabels, que aceptan un array JSON o una cadena separada por comas. Una captura de TIA Portal de la galería añade chartTitle y el array heatmapData, cuyos elementos llevan value, x e y. CellClicked, refreshChart y clearData completan el conjunto.
Lo que nos gusta
- Valores en las celdas con
showValueLabels: se lee sin pasar el ratón - Degradado de dos colores que puedes suavizar a tu paleta
- Estructura de datos visible en una captura de TIA Portal
A tener en cuenta
- El degradado por defecto, de azul a amarillo verdoso, es chillón: elige valores más tranquilos para
startColoryendColor - En la vista previa, el tooltip tapa el valor de la celda de arriba
Propiedades enlazables
- heatmapData
- chartTitle
- xAxisLabels
- yAxisLabels
- minValue
- maxValue
- startColor
- endColor
- showValueLabels
- unitLabel
- backgroundColor
07El mejor para patrones semanales de 24 × 7
Heatmap Grid
La pregunta clásica del responsable de energía: ¿qué día y a qué hora consumimos más? Esta cuadrícula dispone siete días por 24 horas en un panel «Weekly Energy Consumption Heatmap», colorea cada celda en una escala de azul oscuro a rojo y muestra un tooltip como «Thursday 16:00, Value: 9» al pasar el ratón. Los patrones de turno, los ciclos de limpieza y el consumo base del fin de semana saltan a la vista en un dibujo así.
Sus nueve propiedades están todas nombradas en la ficha: heatmapData para los valores, xAxisLabels y yAxisLabels para los ejes, minValue y maxValue para el rango de color, showVisualMap para mostrar u ocultar la escala, valuePrefix para el tooltip, más titleText y backgroundColor. CellClicked informa de la celda, y refreshData y clearSelection dan el control a tus scripts.
Lo que nos gusta
- La disposición natural para patrones semanales
- Interfaz corta y totalmente documentada
- Escala de color que se oculta con
showVisualMap
A tener en cuenta
- En la vista previa, las etiquetas de la escala (0 y 10) se montan sobre las de las horas
- Una escala arcoíris con datos de demo aleatorios se ve recargada, y la ficha no nombra ninguna propiedad de color: modifícalo para una paleta más tranquila
Propiedades enlazables
- heatmapData
- titleText
- xAxisLabels
- yAxisLabels
- minValue
- maxValue
- showVisualMap
- valuePrefix
- backgroundColor
08El mejor para el rendimiento y las pérdidas etapa a etapa (embudo)
Funnel
De cada cien piezas que entran en la línea, ¿cuántas llegan al camión y dónde se quedan las demás? Un embudo lo responde con un solo dibujo. La vista previa es un panel oscuro «PROCESS THROUGHPUT FUNNEL» con seis etapas apiladas que se estrechan de arriba abajo: Raw Material 100%, Processing 92%, Quality Control 84%, Assembly 78%, Packaging 72% y Shipped 70%, cada una de su color y con la leyenda al pie. El escalón más grande es donde hay que ir a mirar primero.
Su ficha nombra las siete propiedades. Los datos van en el array stages, title pone la cabecera, showLegend y showLabels muestran u ocultan la leyenda y el texto de cada etapa, gap separa los segmentos, minSize mantiene visible una última etapa muy pequeña y backgroundColor lo adapta a tu tema. OnStageSelected salta cuando el operador pulsa una etapa, updateValueByName cambia una sola etapa sin reenviar la lista entera y refreshChart lo redibuja tras un cambio de tamaño.
Lo que nos gusta
- Las pérdidas de cada etapa, de un vistazo
- Interfaz corta, con las siete propiedades nombradas
- Actualiza una sola etapa por su nombre desde un script
A tener en cuenta
- Los textos dentro de las etapas son pequeños en la vista previa: dale altura
- La ficha no describe los campos de cada elemento de
stages: revisa la documentación incluida antes de escribir tu script
Propiedades enlazables
- stages
- title
- showLegend
- showLabels
- gap
- minSize
- backgroundColor
09El mejor para correlaciones entre dos variables
Scatter Chart
¿Sube la corriente del motor con la carga? ¿Se acumulan los rechazos a alta temperatura? Son preguntas de gráfico de dispersión, y este es el único gráfico de dispersión dedicado que encontramos, y además limpio. La vista previa es sobria a propósito: unos cincuenta puntos cian sobre fondo oscuro, ejes de 0 a 100 y una rejilla discontinua muy tenue.
Ocho propiedades, todas nombradas en su ficha: el array points para los datos, chartTitle, xAxisLabel y yAxisLabel para el contexto, pointColor y pointSize para los marcadores, showGrid y backgroundColor. PointClicked permite que el operador haga clic en un punto para abrir el lote o el momento que hay detrás, y refreshChart lo redibuja tras un cambio de tamaño.
Lo que nos gusta
- Todo nombrado en la ficha, nada escondido
- Aspecto mínimo que encaja en pantallas HMI de alto rendimiento
- Evento de clic por punto para profundizar
A tener en cuenta
- Una sola serie y un solo color: para comparar dos grupos, mira el Bubble Chart de las menciones o modifícalo
- La vista previa conserva las etiquetas genéricas «X-Axis Value» y «Y-Axis Value»: pon las tuyas
Propiedades enlazables
- points
- chartTitle
- xAxisLabel
- yAxisLabel
- pointColor
- pointSize
- showGrid
- backgroundColor
Menciones de honor: 6 gráficos más que merecen un vistazo
No entraron entre los nueve mejores, casi siempre porque su ficha no nombra sus propiedades o porque son muy específicos, pero cada uno tiene una buena razón para existir. Haz clic en cualquier miniatura para abrir su ficha.
Pie Chart - Dashboard Widget
El veterano del grupo (julio de 2025) y, con 68 descargas en noviembre de 2026, el control más descargado de esta búsqueda. Basado en Apache ECharts, con un donut de esquinas redondeadas y una etiqueta grande en el centro; su galería lo muestra también en una pantalla real de WinCC Unified. La ficha no nombra sus propiedades y el tooltip aún dice «Access From», un resto de la demo de ECharts.
Ver producto
Half Donut Chart - Dashboard Widget
Su hermano: un medio donut con sectores tramados, también basado en Apache ECharts y con el mismo tooltip «Access From». Encaja bien para mostrar el reparto de carga en poco espacio, pero sus propiedades no se nombran en la ficha.
Ver producto
Process Sankey Diagram
Un balance de materia de refinería: crudo, vapor y gas que pasan por destilación, reformado y craqueo catalítico hasta diésel, fuelóleo, GLP, gasolina e hidrógeno. Una vista previa preciosa, pero sus nueve propiedades, dos eventos y dos métodos no se nombran.
Ver producto
Sankey Diagram
Once propiedades, diez de ellas nombradas en la ficha, como
Ver productonodesData,linksDatayenableDragging, más un métodoexportAsImage. Se quedó fuera porque su vista previa sale desvaída sobre un fondo gris claro y sus etiquetas apenas se leen.
Bubble Chart
Una «Process Performance Matrix»: presión en un eje, temperatura en el otro y tamaño y color de la burbuja para la producción. La ficha cuenta diez propiedades, un evento y dos métodos sin nombrarlos.
Ver producto
PQ Diagram_BESS
Un especialista: dibuja el punto de trabajo de un sistema de almacenamiento en baterías (BESS) en un diagrama de potencia activa y reactiva (P-Q), dentro de un círculo que fija
Ver productonominalApparentPower, resalta el cuadrante activo y lanzaLimitExceededcuando se supera la potencia nominal. Recién publicado en noviembre de 2026; los textos de la vista previa están en rumano («descărcare», «încărcare»), aunque su ficha dice que todas las etiquetas de leyenda y ejes se pueden cambiar.
¿No encuentras tu gráfico? Créalo (o modifica uno) con IA, gratis
Una confesión: los nueve gráficos de nuestra lista se crearon con el generador IA de HMIx. Por eso podemos decirlo sin ponernos colorados: si ninguno dibuja tus datos como los necesitas, puedes generar el tuyo en minutos.
Describe el gráfico con palabras normales (por ejemplo, «donut con el reparto del turno en marcha, cambio de formato, paro y avería, con el porcentaje en cada sector, las horas totales en el centro y un evento de clic por sector») y el generador te guía paso a paso: el diseño, las propiedades, eventos y métodos que usarás en WinCC, una simulación para probar valores y el paquete Custom Web Control final para WinCC Unified y WinCC V8. La misma herramienta crea también SVG dinámicos cuando te basta con un dibujo ligero.
- Modifica cualquier gráfico de esta lista: en su ficha, el botón «Editar en el generador IA» lo abre directamente en el generador, listo para que pidas cambios como «muestra el porcentaje en cada sector», «usa una escala de gris a naranja» o «renombra los nodos de la vivienda como líneas de producción». Los enlaces «Editarlo con IA» de este artículo hacen lo mismo.
- Gratis para probar: puedes empezar sin cuenta, con una pequeña asignación diaria de créditos, y el plan Community es gratuito.
- El resultado es tuyo: descarga el paquete y añádelo a tu proyecto de TIA Portal como cualquier otro gráfico de esta página.
Cómo usar un gráfico Custom Web Control en WinCC Unified (y WinCC V8)
La versión corta, para cuando ya has elegido tu gráfico. Nuestra guía de Custom Web Controls cubre cada paso con esquemas y capturas.
Descarga el ZIP
Abre la ficha, inicia sesión con tu cuenta gratuita y descarga el gráfico. El ZIP descargado contiene la documentación y, dentro, el paquete del control llamado
{GUID}.zip: ese archivo interior es el que necesitas.Cópialo en tu proyecto de TIA Portal
Copia el archivo
{GUID}.zip, sin descomprimir, en la carpeta de tu proyecto dentro deUserFiles\CustomControls(crea ambas carpetas si no existen). No lo extraigas.Actualiza Controles propios y arrástralo
En TIA Portal, abre la task card Herramientas, despliega la paleta Controles propios (My controls) y pulsa Actualizar. El gráfico aparece en la lista: arrástralo a tu pantalla y dale sitio para sus etiquetas.
Enlaza y prueba las propiedades
Selecciona el control y abre ventana de inspección → Propiedades → Propiedades → Interfaz. La mayoría de estos gráficos reciben sus datos como array o cadena JSON (
slices,links,heatmapData,points…): rellénalo primero con dos o tres elementos fijos, arranca el Runtime y comprueba el dibujo. Después enlaza los valores a variables internas y cámbialos con un campo E/S. Desmarca «Solo lectura» en cualquier propiedad que el control tenga que escribir de vuelta. Cuando se comporte, pasa a tus variables reales.En WinCC V8
Todos los elegidos de este artículo están etiquetados como compatibles con WinCC V8 en su ficha. El paquete es el mismo; sigue la documentación de WinCC V8 para importar y configurar Custom Web Controls en ese entorno.
Consejo de experto: un gráfico circular solo funciona con unos pocos sectores que sumen un todo con sentido, como las horas de un turno o la energía de un contador. Pasados seis o siete sectores, agrupa los pequeños en «Otros» o cambia a un gráfico de barras. Y en un diagrama de Sankey, comprueba que lo que entra en cada nodo es igual a lo que sale: el ojo detecta enseguida una cinta que aparece de la nada.
Leer la guía completa de Custom Web ControlsPreguntas frecuentes
¿Por qué usar un Custom Web Control para un gráfico circular en WinCC Unified?
Los objetos estándar de WinCC están pensados para curvas, barras y valores de proceso. Cuando quieres un gráfico de tarta o donut, un diagrama de Sankey o un mapa de calor con tus propios datos y un evento al hacer clic, un gráfico Custom Web Control te lo da listo para importar en TIA Portal y enlazar.
¿De verdad son gratis estos gráficos Custom Web Control?
Sí. Todos los gráficos de este artículo están publicados como productos gratuitos en HMIx. Solo necesitas una cuenta gratuita para descargarlos.
¿Cómo envío los valores de mis variables a un gráfico circular o a un diagrama de Sankey?
Estos gráficos reciben sus datos en una propiedad como slices, innerSectors, nodes y links o heatmapData, normalmente un array o una cadena JSON. En TIA Portal puedes rellenar los elementos del array en la ventana de inspección y enlazar cada valor a una variable, o construir la cadena en un script de WinCC. Comprueba el formato exacto en la documentación incluida en la descarga.
¿Cuándo uso un diagrama de Sankey en lugar de un gráfico circular?
Usa un gráfico circular para las partes de un único todo, como los estados de una máquina durante un turno. Usa un diagrama de Sankey cuando la cantidad fluye por etapas, como la energía de la red y del contador de gas hacia departamentos y máquinas, o el material a lo largo de un proceso. Un mapa de calor es la opción correcta cuando la pregunta es cuándo: por hora, día o turno.
¿Funcionan en los Unified Comfort Panels de WinCC y en WinCC V8?
Sus fichas indican compatibilidad con WinCC Unified, incluidos los Unified Comfort Panels, y con WinCC V8. Como con cualquier control generado con IA, prueba su comportamiento en tu propio proyecto y en tu dispositivo de destino antes de pasar a producción, sobre todo la legibilidad de las etiquetas en pantallas pequeñas.
¿Puedo modificar uno de estos gráficos?
Por supuesto. Puedes editar tú mismo el HTML, el CSS y el JavaScript del control, o pulsar «Editar en el generador IA» en la ficha y pedir los cambios con palabras normales. La segunda opción suele ser más rápida, porque el generador se encarga de la interfaz y del empaquetado.
Nuestro veredicto
Si solo descargas uno, que sea el Pie Chart: un donut tranquilo para los estados de máquina que tendrás enlazado en minutos. Para un desglose de dos niveles, el Nested Pie Chart; para real frente a referencia, el Radar Chart; para flujos de energía o de material, el Sankey Diagram, o el Household Energy Sankey Diagram cuando quieras los valores en cada nodo; para cargas por turno, el Heatmap; para una semana entera hora a hora, el Heatmap Grid; para las pérdidas etapa a etapa, el Funnel; y para el «¿depende A de B?», el Scatter Chart.
Y si tus datos necesitan un gráfico que ninguno dibuja (siempre pasa), recuerda que el generador que los creó está a un solo clic.