Langue:Français

Blog · Custom Web Controls

Les 9 meilleurs diagrammes circulaires, diagrammes de Sankey et heatmaps Custom Web Control pour WinCC Unified et WinCC V8 (gratuits)

WinCC Unified est livré avec des objets de courbe et de barres, mais quand il vous faut un diagramme circulaire, un diagramme de Sankey ou une heatmap, un Custom Web Control est le raccourci. En novembre 2026, nous avons donc ouvert chaque Custom Web Control de diagramme circulaire, donut, radar, Sankey, heatmap, entonnoir, nuage de points et bulles du catalogue HMIx — dix-sept candidats —, examiné chaque aperçu à la loupe, lu chaque fiche produit et gardé les neuf que nous poserions sans hésiter sur une vue WinCC Unified ou WinCC V8. Tous gratuits, tous livrés en ZIP CWC, et tous avec leurs propriétés de données nommées sur la fiche produit ou dans ses captures TIA Portal.

Par l’équipe HMIx12 min de lectureMis à jour le
  • Custom Web Control
  • CWC
  • WinCC Unified
  • WinCC V8
  • TIA Portal
  • Diagramme circulaire
  • Diagramme de Sankey
  • Heatmap
Cinq graphiques Custom Web Control du catalogue HMIx en grille : un diagramme circulaire imbriqué sombre de consommation d’énergie, un diagramme de Sankey de l’énergie d’un foyer en kWh, un graphique radar comparant l’état réel à une référence, un donut clair aux bords arrondis avec Motor 1 au centre et un entonnoir de débit de process, de la matière première à l’expédition
La photo de famille : les vrais aperçus de cinq graphiques de cet article, exactement tels que leurs créateurs les ont publiés. Nous les avons seulement mis côte à côte.

Pourquoi un diagramme circulaire, un Sankey ou une heatmap en Custom Web Control comble un vrai manque

Chaque usine se pose des questions auxquelles une courbe répond mal. Où est passé le poste : production, réglage, attente ou défauts ? Quelle ligne consomme le plus d’énergie ? Quelle heure de la semaine chauffe toujours ? Un diagramme circulaire répond à la première, un diagramme de Sankey à la deuxième et une heatmap à la troisième, et aucun n’est ce pour quoi les objets WinCC standard sont conçus.

C’est là qu’intervient un graphique Custom Web Control (CWC). Un CWC est une petite application web — HTML, CSS et JavaScript emballés dans un ZIP — que WinCC Unified (TIA Portal) et WinCC V8 exécutent dans la vue. La plupart des graphiques CWC reçoivent leurs données sous forme de tableau ou de chaîne JSON dans une propriété comme slices, nodes ou heatmapData : vos variables et vos scripts IHM fournissent les nombres, le contrôle les dessine. Beaucoup déclenchent aussi des événements, comme SliceClicked ou CellClicked, pour qu’un clic sur une part ou une cellule ouvre la vue de détail.

Ce qui fait qu’un graphique Custom Web Control mérite d’être téléchargé

Avant la liste, la grille d’évaluation. Voici ce que nous avons regardé, à peu près dans l’ordre de ce qui nous agace le plus quand ça manque :

  • Le bon graphique pour la bonne question. Les parts d’un tout vont dans un camembert, les flux dans un Sankey, les motifs dans le temps dans une heatmap, plusieurs variables face à une référence dans un radar. Un joli graphique qui répond à la mauvaise question, c’est du bruit.
  • Lisible sur un pupitre. Des libellés qui ne sont pas coupés, des valeurs ou des pourcentages qu’on arrive vraiment à lire et une échelle de couleurs qui s’explique toute seule. Un beau dégradé ne remplace pas un chiffre lisible.
  • Un contrat de données propre. Les données dans une seule propriété documentée (slices, links, heatmapData, points), pour savoir exactement ce que vos variables ou vos scripts doivent écrire.
  • Une interaction qui mène quelque part. Un événement au clic sur une part, un nœud ou une cellule transforme une image en navigation. Les fiches qui se contentent de compter leurs propriétés sont passées dans les mentions honorables.
  • Un champion par usage. Un camembert ou donut, un camembert à deux anneaux, un radar, deux diagrammes de Sankey, deux heatmaps, un entonnoir et un nuage de points : des questions différentes, des outils différents.

Comment nous les avons choisis (et ce que nous n’avons pas fait)

En novembre 2026, nous avons cherché dans le catalogue HMIx tous les Custom Web Controls gratuits qui dessinent des diagrammes circulaires, donuts, radars, Sankey, heatmaps, entonnoirs, nuages de points ou graphiques à bulles. Les graphiques à barres et les courbes ont déjà leurs propres articles, ils sont donc restés dehors. Pour chaque candidat, nous avons regardé son vrai aperçu (pas la couverture du catalogue avec son grand titre par-dessus), lu sa fiche produit et, quand le créateur les a publiées, les captures TIA Portal de sa galerie, pour voir quelles propriétés, quels événements et quelles méthodes il documente. Les téléchargements n’ont servi qu’à départager les ex aequo.

Les contrôles dont la fiche ne nomme pas les propriétés sont passés dans les mentions honorables. Nous avons écarté un graphique à bulles dont l’axe « Efficiency (%) » monte jusqu’à 70 000, ainsi qu’un graphique déjà retenu dans notre article sur les graphiques à barres. Et une mise en garde : nous avons jugé des aperçus et de la documentation ; nous n’avons pas fait tourner ces contrôles dans un Runtime réel. Ils ont été générés par IA et chaque fiche produit rappelle de les tester dans votre propre projet TIA Portal avant la mise en production.

Les 9 meilleurs diagrammes circulaires, Sankey, heatmaps et autres graphiques Custom Web Control, un par un

Chaque fiche montre le vrai aperçu, ce que nous avons aimé, ce qu’il faut garder en tête et les propriétés nommées sur sa fiche produit, puis la vignette du catalogue : cliquez dessus pour ouvrir la fiche produit et télécharger le graphique gratuitement.

01Meilleur choix global (camembert ou donut)

Pie Chart

Diagramme circulaire Custom Web Control en mode donut sur fond sombre, avec des parts Production, Idle, Maintenance, Fault et Setup en bleu, gris, orange, rouge et violet et une légende à droite
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

S’il ne fallait en garder qu’un, ce serait celui-ci, parce qu’il répond à la question qu’on vous posera le plus souvent : où est passé le temps ? L’aperçu montre un donut sombre et propre réparti entre Production, Idle, Maintenance, Fault et Setup, en bleu, gris, orange, rouge et violet, avec une légende discrète à droite. C’est exactement la répartition des états d’équipement dont une vue OEE a besoin, et elle ne crie pas.

Camembert ou donut, c’est vous qui voyez : innerRadius et outerRadius sont des pourcentages, donc un rayon intérieur à zéro donne un camembert classique. Les données vont dans le tableau slices, title ajoute un titre, showLegend et legendPosition (top, bottom, left ou right) placent la légende, et backgroundColor s’accorde à votre thème. D’après sa fiche, les infobulles affichent chaque valeur avec son unité, SliceClicked permet d’ouvrir le détail d’un état d’un simple clic, et les méthodes refresh et resetValues vident le graphique à un changement de lot.

Ce qu’on aime

  • Camembert ou donut avec deux propriétés en pourcentage
  • Look calme et lisible sur les vues sombres
  • Événement au clic par part pour descendre dans le détail

À garder en tête

  • Aucune valeur ni aucun pourcentage sur les parts dans l’aperçu : l’opérateur doit survoler ou lire la légende
  • La fiche compte huit propriétés mais n’en nomme que sept : vérifiez la propriété d’unité dans TIA Portal

Propriétés à relier

  • title
  • slices
  • innerRadius
  • outerRadius
  • showLegend
  • legendPosition
  • backgroundColor
Pie Chart : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Pie Chart

Gratuit · WinCC Unified & V8 · CWC (.zip)

02Le meilleur pour les répartitions à deux niveaux (deux anneaux)

Nested Pie Chart

Diagramme circulaire imbriqué Custom Web Control intitulé Energy Consumption Breakdown, avec un anneau intérieur pour Production, Infrastructure et Logistics et un anneau extérieur pour les lignes d’assemblage, le conditionnement, l’automatisation d’entrepôt, le CVC et l’éclairage, avec des étiquettes de valeur et de pourcentage
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Un camembert vous dit que la production consomme le plus d’énergie ; celui-ci vous dit aussi quelle ligne. L’aperçu, « Energy Consumption Breakdown », a un camembert intérieur à trois départements (Production, Infrastructure et Logistics) et un anneau extérieur avec leurs équipements, chacun avec une étiquette indiquant la valeur et le pourcentage : « Assembly Line A: 450, 33.33% », « HVAC Unit 1: 120, 8.89% » et ainsi de suite.

Sa fiche annonce 17 propriétés et en nomme douze. Les données vont dans innerSectors et outerSectors ; la géométrie dans innerRadius, outerRadiusStart et outerRadiusEnd ; les textes dans titleText, subtitleText et unitLabel ; et les étiquettes dans labelRichBackgroundColor et labelLineLength. theme bascule entre clair et sombre, animationDuration adoucit les mises à jour, SectorClicked signale les clics et resetSelection les efface.

Ce qu’on aime

  • Deux niveaux de détail dans un seul graphique
  • Valeur et pourcentage sur chaque secteur extérieur
  • Thèmes clair et sombre intégrés

À garder en tête

  • Les étiquettes sont petites dans l’aperçu : donnez-lui une grande tuile ou moins de secteurs
  • Cinq de ses 17 propriétés ne sont pas nommées sur la fiche

Propriétés à relier

  • innerSectors
  • outerSectors
  • titleText
  • subtitleText
  • unitLabel
  • theme
  • innerRadius
  • outerRadiusStart
  • outerRadiusEnd
  • labelRichBackgroundColor
  • labelLineLength
  • animationDuration
Nested Pie Chart : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Nested Pie Chart

Gratuit · WinCC Unified & V8 · CWC (.zip)

03Le meilleur pour comparer le réel à une référence

Radar Chart

Graphique radar Custom Web Control sur fond sombre avec six axes, efficacité, vitesse, charge, pression, vibration et température, un polygone cyan Actual Status et un polygone jaune en pointillés Reference
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Un graphique radar est le moyen le plus rapide de voir si une machine se comporte comme sa référence. Celui-ci trace six axes (efficacité, vitesse, charge, pression, vibration et température) sur une grille hexagonale sombre, avec un polygone cyan plein pour « Actual Status » et un polygone jaune en pointillés pour « Reference ». Là où les deux formes s’écartent, il y a quelque chose à regarder.

Ses sept propriétés sont toutes nommées sur la fiche. indicators définit les axes et leur maximum, series porte les données, chartTitle et showLegend ajoutent du contexte, labelColor et backgroundColor l’habillent et animationDuration adoucit les transitions. PointClicked indique quel point a été cliqué, pratique pour ouvrir la courbe de cette variable.

Ce qu’on aime

  • Réel et référence d’un seul coup d’œil
  • Interface courte et entièrement documentée
  • Couleurs calmes et noms d’axes lisibles

À garder en tête

  • Chaque axe a son propre maximum : mettez vos valeurs à l’échelle avec bon sens, sinon la forme vous trompera
  • Pas de titre dans l’aperçu : renseignez chartTitle pour que l’opérateur sache de quelle machine il s’agit

Propriétés à relier

  • indicators
  • series
  • chartTitle
  • showLegend
  • labelColor
  • backgroundColor
  • animationDuration
Radar Chart : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Radar Chart

Gratuit · WinCC Unified & V8 · CWC (.zip)

04Le chouchou du public : le diagramme de Sankey le plus téléchargé

Sankey Diagram

Diagramme de Sankey Custom Web Control intitulé Energy Flow Analysis sur fond sombre, avec des flux partant de Line 1 et Line 2, passant par Machine 1 à 4 et aboutissant à Spare 1 à 6
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Parmi les diagrammes de Sankey de notre recherche, c’est celui que les gens téléchargent le plus (16 téléchargements et deux avis cinq étoiles en novembre 2026). L’aperçu que nous montrons est un panneau sombre « ENERGY FLOW ANALYSIS » : deux lignes alimentent quatre machines, qui se répartissent en six sorties, avec de larges rubans translucides dont l’épaisseur suit la valeur. Une autre image de la galerie montre un survol qui estompe tout sauf un lien et l’étiquette « Machine 3 -- Spare 1 10 ».

Sa fiche dit seulement qu’il a neuf propriétés et deux événements, mais la galerie contient deux captures TIA Portal de la fenêtre d’inspection qui tranchent la question. La structure vit dans deux tableaux : nodes (chaque élément a un name) et links (chacun avec source, target et value). Autour, title et showTitle pour l’en-tête, nodeWidth et nodeGap pour les colonnes, et curveness et linkOpacity pour les rubans. Voir les tableaux édités dans TIA Portal, c’est exactement le genre de garantie qu’on veut avant de relier quoi que ce soit.

Ce qu’on aime

  • Structure de données montrée dans de vraies captures TIA Portal
  • Modèle simple : une liste de noms et une liste de liens source-cible-valeur
  • La mise en évidence au survol rend lisible un diagramme chargé

À garder en tête

  • La première image de la galerie coupe les libellés de droite (« Production I », « HVAC Syste ») : laissez-leur de la place
  • Les deux événements ne sont pas nommés sur la fiche : vérifiez-les dans la documentation incluse

Propriétés à relier

  • nodes
  • links
  • title
  • showTitle
  • nodeWidth
  • nodeGap
  • curveness
  • linkOpacity
Sankey Diagram : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Sankey Diagram

Gratuit · WinCC Unified & V8 · CWC (.zip)

05Le meilleur pour les bilans énergétiques avec une valeur sur chaque nœud

Household Energy Sankey Diagram

Diagramme de Sankey Custom Web Control de l’énergie d’un foyer : 19 000 kWh d’énergie totale répartis entre électricité et gaz naturel, puis entre chauffage, eau chaude, climatisation, électroménager, éclairage et électronique, et enfin entre réfrigérateur, lave-linge et sèche-linge, lave-vaisselle, ordinateur et télévision, avec des valeurs en kWh sur chaque nœud
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Le diagramme de Sankey le plus informatif du catalogue, et le seul qui écrit la valeur sur chaque nœud. Total Energy (19 000 kWh) se répartit entre Electricity (10 800) et Natural Gas (8 200), puis entre chauffage, eau chaude, climatisation, électroménager, éclairage et électronique, et enfin entre réfrigérateur, lave-linge et sèche-linge, lave-vaisselle, ordinateur et télévision. Nous avons fait l’addition : chaque niveau de la démo tombe juste, ce qui est plus que ce que réussissent bien des rapports énergétiques.

Avec 28 propriétés, c’est aussi le plus configurable. La fiche nomme ShowLabels et ShowValues pour les textes, FlowOpacity pour les rubans, AnimationEnabled pour les transitions, nodeWidth et nodePadding pour la disposition, et des propriétés de marge comme marginTop et marginRight pour éviter que les libellés soient rognés. Il déclenche NodeClicked et FlowSelected, et les méthodes updateFlowValue, UpdateData et SetAnimationSpeed le rafraîchissent depuis vos scripts.

Ce qu’on aime

  • Valeurs en kWh sur chaque nœud, lisibles sans survol
  • Trois niveaux de répartition qui tombent juste
  • Très configurable, avec des événements sur les nœuds et les flux

À garder en tête

  • Il est pensé pour un foyer, et sa fiche nomme des sources et des usages comme TotalElectricity, GasHeating et Refrigerator : vérifiez dans la documentation jusqu’où vous pouvez les renommer pour une usine
  • Certains libellés (« Water Heating », « Appliances ») chevauchent les rubans

Propriétés à relier

  • ShowLabels
  • ShowValues
  • FlowOpacity
  • AnimationEnabled
  • nodeWidth
  • nodePadding
  • marginTop
  • marginRight
Household Energy Sankey Diagram : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Household Energy Sankey Diagram

Gratuit · WinCC Unified & V8 · CWC (.zip)

06Le meilleur pour les cartes de charge par poste et de production

Heatmap

Heatmap Custom Web Control intitulée Production Load Analysis avec une grille de trois jours sur trois postes, des valeurs inscrites dans chaque cellule, une cellule mise en évidence, une infobulle indiquant Saturday 08:00 Value 50% et une échelle de couleurs du bleu au jaune
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Là où le Heatmap Grid montre une semaine entière heure par heure, celle-ci se contente d’être petite et précise. L’aperçu que nous montrons est une grille « Production Load Analysis » de trois jours sur trois postes (00:00, 08:00 et 16:00), avec la valeur inscrite dans chaque cellule, un contour blanc autour de la cellule sélectionnée, une infobulle « Value: 50% » et, en dessous, une échelle de couleurs avec des curseurs. La première image de sa galerie montre la version grand format : sept jours sur 24 heures, des bleus froids la nuit à l’orange en milieu de journée.

C’est la mieux documentée des deux heatmaps. La fiche nomme startColor et endColor pour le dégradé, minValue et maxValue pour sa plage, showValueLabels pour les nombres dans les cellules, unitLabel pour les infobulles, backgroundColor, ainsi que xAxisLabels et yAxisLabels, qui acceptent un tableau JSON ou une chaîne séparée par des virgules. Une capture TIA Portal de la galerie ajoute chartTitle et le tableau heatmapData, dont les éléments portent value, x et y. CellClicked, refreshChart et clearData complètent le tout.

Ce qu’on aime

  • Valeurs dans les cellules avec showValueLabels : lisible sans survol
  • Dégradé à deux couleurs que vous pouvez adoucir selon votre palette
  • Structure de données visible dans une capture TIA Portal

À garder en tête

  • Le dégradé par défaut, du bleu au jaune-vert, est criard : choisissez des valeurs startColor et endColor plus calmes
  • Dans l’aperçu, l’infobulle cache la valeur de la cellule du dessus

Propriétés à relier

  • heatmapData
  • chartTitle
  • xAxisLabels
  • yAxisLabels
  • minValue
  • maxValue
  • startColor
  • endColor
  • showValueLabels
  • unitLabel
  • backgroundColor
Heatmap : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Heatmap

Gratuit · WinCC Unified & V8 · CWC (.zip)

07Le meilleur pour les motifs hebdomadaires 24 × 7

Heatmap Grid

Grille heatmap Custom Web Control intitulée Weekly Energy Consumption Heatmap, avec sept jours sur 24 heures de cellules colorées du bleu foncé au rouge, une infobulle indiquant Thursday 16:00 Value 9 et une échelle de couleurs en dessous
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

La question classique du responsable énergie : quel jour et à quelle heure consomme-t-on le plus ? Cette grille dispose sept jours sur 24 heures dans un panneau « Weekly Energy Consumption Heatmap », colore chaque cellule sur une échelle du bleu foncé au rouge et affiche une infobulle comme « Thursday 16:00, Value: 9 » au survol. Rythmes de postes, cycles de nettoyage et consommation de base du week-end sautent aux yeux sur une image comme celle-ci.

Ses neuf propriétés sont toutes nommées sur la fiche : heatmapData pour les valeurs, xAxisLabels et yAxisLabels pour les axes, minValue et maxValue pour la plage de couleurs, showVisualMap pour afficher ou masquer l’échelle, valuePrefix pour l’infobulle, plus titleText et backgroundColor. CellClicked signale la cellule, et refreshData et clearSelection donnent la main à vos scripts.

Ce qu’on aime

  • La disposition naturelle pour les motifs hebdomadaires
  • Interface courte et entièrement documentée
  • Échelle de couleurs masquable avec showVisualMap

À garder en tête

  • Dans l’aperçu, les libellés de l’échelle (0 et 10) chevauchent ceux des heures
  • Une échelle arc-en-ciel avec des données de démo aléatoires paraît chargée, et la fiche ne nomme aucune propriété de couleur : remixez-la pour une palette plus calme

Propriétés à relier

  • heatmapData
  • titleText
  • xAxisLabels
  • yAxisLabels
  • minValue
  • maxValue
  • showVisualMap
  • valuePrefix
  • backgroundColor
Heatmap Grid : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Heatmap Grid

Gratuit · WinCC Unified & V8 · CWC (.zip)

08Le meilleur pour le rendement et les pertes étape par étape (entonnoir)

Funnel

Graphique en entonnoir Custom Web Control intitulé Process Throughput Funnel sur fond sombre, avec six étapes colorées qui se resserrent de Raw Material 100% à Shipped 70% en passant par Processing 92%, Quality Control 84%, Assembly 78% et Packaging 72%, et une légende en dessous
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Sur cent pièces qui entrent sur la ligne, combien arrivent jusqu’au camion, et où tombent les autres ? Un entonnoir répond à cette question en une seule image. L’aperçu est un panneau sombre « PROCESS THROUGHPUT FUNNEL » avec six étapes empilées qui se resserrent de haut en bas : Raw Material 100%, Processing 92%, Quality Control 84%, Assembly 78%, Packaging 72% et Shipped 70%, chacune dans sa propre couleur, avec une légende en bas. C’est la plus grosse marche qu’on va regarder en premier.

Sa fiche nomme ses sept propriétés. Les données vivent dans le tableau stages, title définit l’en-tête, showLegend et showLabels affichent ou masquent la légende et le texte de chaque étape, gap espace les segments, minSize garde visible une dernière étape minuscule et backgroundColor s’accorde à votre thème. OnStageSelected se déclenche quand l’opérateur clique sur une étape, updateValueByName modifie une seule étape sans renvoyer toute la liste et refreshChart le redessine après un redimensionnement.

Ce qu’on aime

  • Pertes par étape visibles d’un coup d’œil
  • Interface courte, ses sept propriétés nommées
  • Mise à jour d’une seule étape par son nom depuis un script

À garder en tête

  • Les libellés à l’intérieur des étapes sont petits dans l’aperçu : donnez-lui de la hauteur
  • La fiche ne décrit pas les champs de chaque élément de stages : consultez la documentation incluse avant d’écrire votre script

Propriétés à relier

  • stages
  • title
  • showLegend
  • showLabels
  • gap
  • minSize
  • backgroundColor
Funnel : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Funnel

Gratuit · WinCC Unified & V8 · CWC (.zip)

09Le meilleur pour les corrélations entre deux variables

Scatter Chart

Nuage de points Custom Web Control sur fond sombre avec une cinquantaine de points cyan, des axes X et Y de 0 à 100 et une grille en pointillés
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Le courant moteur monte-t-il avec la charge ? Les rebuts s’accumulent-ils à haute température ? Ce sont des questions de nuage de points, et c’est le seul nuage de points dédié que nous avons trouvé, un propre en plus. L’aperçu est volontairement dépouillé : une cinquantaine de points cyan sur fond sombre, des axes de 0 à 100 et une grille en pointillés discrète.

Huit propriétés, toutes nommées sur sa fiche : le tableau points pour les données, chartTitle, xAxisLabel et yAxisLabel pour le contexte, pointColor et pointSize pour les marqueurs, showGrid et backgroundColor. PointClicked permet à l’opérateur de cliquer sur un point pour ouvrir le lot ou l’instant qui se cache derrière, et refreshChart le redessine après un redimensionnement.

Ce qu’on aime

  • Tout est nommé sur la fiche, rien de caché
  • Look minimaliste qui convient aux vues IHM haute performance
  • Événement au clic par point pour descendre dans le détail

À garder en tête

  • Une seule série et une seule couleur : pour comparer deux groupes, regardez le Bubble Chart dans les mentions ou remixez-le
  • L’aperçu garde les libellés génériques « X-Axis Value » et « Y-Axis Value » : mettez les vôtres

Propriétés à relier

  • points
  • chartTitle
  • xAxisLabel
  • yAxisLabel
  • pointColor
  • pointSize
  • showGrid
  • backgroundColor
Scatter Chart : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Scatter Chart

Gratuit · WinCC Unified & V8 · CWC (.zip)

Mentions honorables : 6 autres graphiques qui valent le coup d’œil

Ils n’ont pas intégré le top 9, surtout parce que leurs fiches produit ne nomment pas leurs propriétés ou parce qu’ils sont très spécialisés, mais chacun a une bonne raison d’exister. Cliquez sur une vignette pour ouvrir sa fiche produit.

  • Pie Chart - Dashboard Widget : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Pie Chart - Dashboard Widget

    Le doyen du groupe (juillet 2025) et, avec 68 téléchargements en novembre 2026, le contrôle le plus téléchargé de cette recherche. Construit sur Apache ECharts, avec un donut aux bords arrondis et un grand libellé au centre ; sa galerie le montre aussi sur une vraie vue WinCC Unified. La fiche ne nomme pas ses propriétés, et l’infobulle affiche toujours « Access From », un reste de la démo ECharts.

    Voir le produit
  • Half Donut Chart - Dashboard Widget : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Half Donut Chart - Dashboard Widget

    Son petit frère : un demi-donut aux parts texturées, lui aussi basé sur Apache ECharts et avec la même infobulle « Access From ». Un bon candidat pour un affichage compact de répartition de charge, mais ses propriétés ne sont pas nommées sur la fiche.

    Voir le produit
  • Process Sankey Diagram : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Process Sankey Diagram

    Un bilan matière de raffinerie : pétrole brut, vapeur et gaz passent par la distillation, le reformage et le craquage catalytique pour donner du diesel, du fioul, du GPL, de l’essence et de l’hydrogène. Un très bel aperçu, mais ses neuf propriétés, deux événements et deux méthodes ne sont pas nommés.

    Voir le produit
  • Sankey Diagram : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Sankey Diagram

    Onze propriétés, dont dix nommées sur la fiche, comme nodesData, linksData et enableDragging, plus une méthode exportAsImage. Il a raté la liste parce que son aperçu est délavé sur un fond gris clair et que ses libellés sont difficiles à lire.

    Voir le produit
  • Bubble Chart : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Bubble Chart

    Une « Process Performance Matrix » : la pression sur un axe, la température sur l’autre, et la taille et la couleur des bulles pour la production. La fiche compte dix propriétés, un événement et deux méthodes sans les nommer.

    Voir le produit
  • PQ Diagram_BESS : graphique Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    PQ Diagram_BESS

    Un spécialiste : il trace le point de fonctionnement d’un système de stockage d’énergie par batterie sur un diagramme de puissance active et réactive (P-Q), à l’intérieur d’un cercle défini par nominalApparentPower, met en évidence le quadrant actif et déclenche LimitExceeded quand la puissance nominale est dépassée. Tout nouveau en novembre 2026, et les libellés de l’aperçu sont en roumain (« descărcare », « încărcare »), même si sa fiche indique que chaque légende et chaque libellé d’axe peuvent être modifiés.

    Voir le produit

Vous n’avez pas trouvé votre graphique ? Créez le vôtre (ou remixez-en un) avec l’IA, gratuitement

Un aveu : les neuf graphiques de notre liste ont été créés avec le générateur IA de HMIx. C’est pour ça que nous pouvons le dire sans rougir : si aucun ne dessine vos données comme vous en avez besoin, vous pouvez générer le vôtre en quelques minutes.

Décrivez le graphique avec vos mots (par exemple, « donut de la répartition du temps du poste entre marche, réglage, attente et défaut, avec le pourcentage sur chaque part, le total d’heures au centre et un événement au clic par part ») et le générateur vous guide pas à pas : le design, les propriétés, événements et méthodes que vous utiliserez dans WinCC, une simulation pour essayer des valeurs et le paquet Custom Web Control final pour WinCC Unified et WinCC V8. Le même outil crée aussi des SVG dynamiques quand un dessin léger suffit.

  • Remixez n’importe quel graphique de cette liste : sur sa fiche produit, le bouton « Modifier dans le générateur IA » l’ouvre directement dans le générateur, prêt à recevoir vos demandes, comme « affiche le pourcentage sur chaque part », « utilise une échelle du gris à l’orange » ou « renomme les nœuds du foyer en lignes de production ». Les liens « Modifier avec l’IA » de cet article font la même chose.
  • Gratuit pour essayer : vous pouvez commencer sans compte, avec une petite allocation quotidienne de crédits, et le plan Community est gratuit.
  • Le résultat est à vous : téléchargez le paquet et ajoutez-le à votre projet TIA Portal comme n’importe quel autre graphique de cette page.

Comment utiliser un graphique Custom Web Control dans WinCC Unified (et WinCC V8)

La version courte, pour quand vous avez déjà choisi votre graphique. Notre guide des Custom Web Controls détaille chaque étape avec schémas et captures d’écran.

  1. Téléchargez le ZIP

    Ouvrez la fiche produit, connectez-vous avec votre compte gratuit et téléchargez le graphique. Le ZIP téléchargé contient la documentation et, à l’intérieur, le paquet du contrôle nommé {GUID}.zip : c’est ce fichier intérieur qu’il vous faut.

  2. Copiez-le dans votre projet TIA Portal

    Copiez le fichier {GUID}.zip, toujours compressé, dans le dossier de votre projet, sous UserFiles\CustomControls (créez les deux dossiers s’ils n’existent pas). Ne l’extrayez pas.

  3. Actualisez Mes contrôles et faites-le glisser

    Dans TIA Portal, ouvrez la task card Outils, développez la palette Mes contrôles et cliquez sur Actualiser. Le graphique apparaît dans la liste : faites-le glisser sur votre vue et laissez-lui assez de place pour ses libellés.

  4. Reliez et testez les propriétés

    Sélectionnez le contrôle et, dans la fenêtre d’inspection, ouvrez Propriétés → Propriétés → Interface. La plupart de ces graphiques reçoivent leurs données sous forme de tableau ou de chaîne JSON (slices, links, heatmapData, points…) : remplissez-les d’abord avec deux ou trois éléments statiques, lancez Runtime et vérifiez le dessin. Reliez ensuite les valeurs à des variables internes et modifiez-les avec un champ E/S. Décochez Lecture seule pour toute propriété que le contrôle doit réécrire. Une fois que tout se comporte bien, passez à vos vraies variables.

  5. Sous WinCC V8

    Chaque graphique du top de cet article est indiqué comme compatible WinCC V8 sur sa fiche produit. Le paquet est le même ; suivez la documentation WinCC V8 pour importer et configurer des Custom Web Controls dans cet environnement.

Astuce de pro : un diagramme circulaire ne fonctionne qu’avec une poignée de parts qui forment un tout qui a du sens, comme les heures d’un poste ou l’énergie d’un compteur. Au-delà de six ou sept parts, regroupez les petites dans « Autres » ou passez à un graphique à barres. Et dans un diagramme de Sankey, vérifiez que ce qui entre dans chaque nœud est égal à ce qui en sort : l’œil repère tout de suite un ruban sorti de nulle part.

Lire le guide complet des Custom Web Controls

Questions fréquentes

Pourquoi utiliser un Custom Web Control pour un diagramme circulaire dans WinCC Unified ?

Les objets WinCC standard sont pensés autour des courbes, des barres et des valeurs process. Quand vous voulez un camembert ou un donut, un diagramme de Sankey ou une heatmap avec vos propres données et un événement au clic, un graphique Custom Web Control vous donne ce graphique prêt à importer dans TIA Portal et à relier.

Ces graphiques Custom Web Control sont-ils vraiment gratuits ?

Oui. Chaque graphique de cet article est publié comme produit gratuit sur HMIx. Il vous suffit d’un compte gratuit pour les télécharger.

Comment envoyer les valeurs de mes variables à un diagramme circulaire ou à un diagramme de Sankey ?

Ces graphiques reçoivent leurs données dans une propriété comme slices, innerSectors, nodes et links ou heatmapData, généralement sous forme de tableau ou de chaîne JSON. Dans TIA Portal, vous pouvez remplir les éléments du tableau dans la fenêtre d’inspection et relier chaque valeur à une variable, ou construire la chaîne dans un script WinCC. Vérifiez le format exact dans la documentation incluse dans le téléchargement.

Quand utiliser un diagramme de Sankey plutôt qu’un diagramme circulaire ?

Utilisez un diagramme circulaire pour les parts d’un seul tout, comme les états d’une machine pendant un poste. Utilisez un diagramme de Sankey quand la quantité circule à travers plusieurs étapes, comme l’énergie qui va du réseau et du compteur gaz vers les départements et les machines, ou la matière à travers un process. Une heatmap est le bon choix quand la question est « quand » : par heure, par jour ou par poste.

Fonctionnent-ils sur les WinCC Unified Comfort Panels et sur WinCC V8 ?

Leurs fiches produit indiquent une compatibilité avec WinCC Unified, Unified Comfort Panels compris, et avec WinCC V8. Comme pour tout contrôle généré par IA, testez le comportement dans votre propre projet et sur votre appareil cible avant la mise en production, en particulier la lisibilité des libellés sur les petits écrans.

Puis-je modifier l’un de ces graphiques ?

Bien sûr. Vous pouvez modifier vous-même le HTML, le CSS et le JavaScript du contrôle, ou cliquer sur « Modifier dans le générateur IA » sur la fiche produit et demander les modifications en langage courant. La seconde option est généralement plus rapide, car le générateur s’occupe de l’interface et du paquet.

Notre verdict

Si vous n’en téléchargez qu’un, prenez le Pie Chart : un donut posé pour les états machine, que vous aurez relié en quelques minutes. Pour une répartition à deux niveaux, le Nested Pie Chart ; pour le réel face à la référence, le Radar Chart ; pour les flux d’énergie ou de matière, le Sankey Diagram, ou le Household Energy Sankey Diagram si vous voulez les valeurs sur chaque nœud ; pour la charge par poste, la Heatmap ; pour une semaine entière heure par heure, le Heatmap Grid ; pour les pertes étape par étape, le Funnel ; et pour « est-ce que A dépend de B ? », le Scatter Chart.

Et si vos données réclament un graphique qu’aucun ne dessine (c’est toujours le cas), n’oubliez pas que le générateur qui les a créés n’est qu’à un clic.