Med Dynamisk SVG kan du endre farger eller attributter i en SVG basert på verdier fra datapunkter. Dette gjør det mulig å lage mer avanserte, tilpassede visualiseringer og animasjoner direkte i visningen.
Bruksområde
-
Fremheve driftstilstander (f.eks. grønn farge når en vifte er i drift).
-
Indikere feil (f.eks. rød farge når et datapunkt rapporterer feil).
-
Skape dynamiske animasjoner eller statusmarkeringer i egendefinerte SVG-grafikker.
Oppsett
-
Last opp en SVG i visningen med Dynamisk SVG-kontainer
-
Fyll inn feltene for å definere hvordan datapunktet skal styre attributtene:
-
Datapunkt: Velg ønsket datapunkt som skal styre endringen.
-
SVG element ID: ID-en til elementet i SVG-en du vil endre.
-
SVG attribute ID: Attributtet som skal endres (f.eks. stroke, fill, opacity).
-
Verdi: Hvilken datapunktverdi som skal trigge endringen (kan være lik eller større enn en spesifisert verdi).
-
Farge/Streng: Velg en farge eller streng som skal brukes når verdien matcher.
Eksempel: Endre farge på strek
SVG-kode:
<g id="active" stroke="#ADADAD">
<circle id="circle" stroke-linejoin="round" />
<path stroke-linejoin="round" />
</g>
Oppsett i Dynamisk SVG-formen:
-
Datapunkt: FanStatus
-
SVG element ID: active
-
SVG attribute ID: stroke
-
Verdi: 1
-
Farge/Streng: #00FF00 (grønn)
Resultat: Når datapunktet FanStatus = 1, blir streken grønn.
Tips
-
Bruk tydelige og unike ID-er i SVG-en for å unngå konflikt.
-
Du kan bruke både heksadesimale farger (#RRGGBB) og strengverdier (f.eks. hidden, visible).
