Linienanpassungen für ftui-chart v3

[Marko1976]

Hallo, ich würde gerne wissen welche Möglichkeiten es gibt eine Linie in einem ftui-chart in ftui3 anzupassen, also Dicke, Form, Art, Aussehen etc.

Einige sind mir bekannt wie die border-width-Eigenschaft, aber zum Beispiel bekomme ich es nicht hin, eine Linie gestrichelt darzustellen. Deshalb würde ich gerne mal eine Liste erstellen mit allen Eigenschaften, Attributen etc. die sich auf das Aussehen eines Chart-Data-Elementes auswirken können.

Bekannt sind:
Color:                              Vordergrundfarbe der Linie   
background-color:            Hintergrundfarbe der Linie bei gesetztem Attribut FILL
point-background-color:   Hintergrundfarbe des Legendenpunktes
point-radius:                  Größe der Datenpunkte im Chart
border-width:                  Rahmen der Linie (somit auch Linienstärke)
type:                        Linienart (hier sollte ja eigentlich ein gestrichelt existieren, oder)
stepped:                     stufige Darstellung der Linie
fill:                        Füllung der Linie unterhalb bis zum 0-Punkt

Was gibt es sonst noch?

[setstate]

dashed und dotted line type habe ich jetzt eingebaut

Code Auswählen Erweitern

<ftui-chart id="mychart1" title="humidity" width="300px" height="200px" unit="24h"  grid-line-color="#add" >
   <ftui-chart-data log="FileLog_THSensorWZ" spec="4:THSensorWZ.humidity" [update]="THSensorWZ:state:time" type="dashed" point-radius="0">
   </ftui-chart-data>
   <ftui-chart-controls units="24h, 30d"></ftui-chart-controls>
</ftui-chart>
<ftui-chart id="mychart1" title="humidity" width="300px" height="200px" unit="24h"  grid-line-color="#eee" >
   <ftui-chart-data log="FileLog_THSensorWZ" spec="4:THSensorWZ.humidity" [update]="THSensorWZ:state:time" type="dotted" point-radius="0">
   </ftui-chart-data>
   <ftui-chart-controls units="24h, 30d"></ftui-chart-controls>
</ftui-chart>

Attribute Docu ist hier: https://github.com/knowthelist/ftui#chart

[Marko1976]

also sobald ich etwas anderes als type="line" in ein ftui-chart-data Element schreibe wird das Diagramm gar nicht mehr gezeichnet. Die Fläche bleibt einfach leer und es wird nur noch die Steuerung darunter angezeigt.
Ich habe es mit type="dotted" oder auch type="dashed" versucht, beides sorg wie gesagt nur dafür, dass gar nichts mehr gezeichnet wird.

Ich möchte gerne 1 von 8 Datenquellen als gestrichelt darstellen und die anderen als normale durchgezogene Linie.
Wieso funktioniert das bei mir nicht?

Mein Code sieht so aus:

Code Auswählen Erweitern

<ftui-chart width="95%" height="85%" y-label="Preis" y-unit=" EUR" y-tick-step="0.01"
    unit="24h" y-step-size="0.25" [update]="Settings_Tablet:Diagramm_DiagrammCounter | filter(.*)"
    style="--chart-legend-font-size: 16; --chart-tick-font-size: 12; --chart-title-font-size: 28; --chart-title-font-style: bold; --chart-grid-line-color: dimgray;">

    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Hahn.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showJET:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showJET | map('false:false, .*true')"
        color="yellow" background-color="yellow" point-background-color="yellow" point-radius="0" border-width="2"
        label="JET Heinsberg&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HSe_Shell_Industriestr.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showSHELL:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showSHELL | map('false:false, .*true')"
        color="greenyellow" background-color="greenyellow" point-background-color="greenyellow" point-radius="0" border-width="2"
        label="Shell Heinsberg&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Hahn.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showGeiser:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showGeiser | map('false:false, .*true')"
        color="teal" background-color="teal" point-background-color="teal" point-radius="0" border-width="2"
        label="bft Geiser&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Kuttenkeuler.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showKut:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showKut | map('false:false, .*true')"
        color="brown" background-color="brown" point-background-color="brown" point-radius="0" border-width="2"
        label="bft Kuttenkeuler&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Pustylnyk.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showTOTAL:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showTOTAL | map('false:false, .*true')"
        color="orange" background-color="orange" point-background-color="orange" point-radius="0" border-width="2"
        label="Total Heinsberg&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HSe_ARAL_Roermonderstr.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showARAL:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showARAL | map('false:false, .*true')"
        color="blue" background-color="blue" point-background-color="blue" point-radius="0" border-width="2"
        label="ARAL Karken&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HSe_ESSO_Roermonderstr.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showESSO:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showESSO | map('false:false, .*true')"
        color="green" background-color="green" point-background-color="green" point-radius="0" border-width="2"
        label="ESSO Karken&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Bachhaus.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showPM:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showPM | map('false:false, .*true')"
        color="info" background-color="info" point-background-color="info" point-radius="0" border-width="2"
        label="PM Express Dremmen&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HSe_JansesMattes.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showTinQ:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showTinQ | map('false:false, .*true')"
        color="pink" background-color="pink" point-background-color="pink" point-radius="0" border-width="2"
        label="TinQ Janses Mattes&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_HS_Tramin.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showTramin:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showTramin | map('false:false, .*true')"
        color="cyan" background-color="cyan" point-background-color="cyan" point-radius="0" border-width="2"
        label="Tramin Dremmen&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:Tankstelle_AC_SB_UebacherWeg.{{device}}_complete" class="size-6"
        [update]="Settings_Tablet:Diagramm_showAC:time" unit="24h" type="line" [hidden]="Settings_Tablet:Diagramm_showAC | map('false:false, .*true')"
        color="medium" background-color="medium" point-background-color="medium" point-radius="0" border-width="2"
        label="SB Tankstelle Alsdorf&nbsp;&nbsp;">
    </ftui-chart-data>

    <ftui-chart-data stepped log="{{logfile}}" spec="4:{{device}}.Komplettpreis" size="6" class="size-6"
        [update]="{{logfile}}:state:time" unit="24h" type="line"
        color="light" background-color="light" point-background-color="light" point-radius="0" border-width="3"
        label="Bestpreis&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:{{device}}.Komplettpreis" size="6" class="size-6"
        [update]="{{logfile}}:state:time" unit="24h" type="line"
        color="#333333" background-color="#333333" point-background-color="#333333" point-radius="0" border-width="6">
    </ftui-chart-data>

    <ftui-chart-data stepped log="{{logfile}}" spec="4:{{device}}.Durchschnitt" class="size-6"
        [update]="{{logfile}}:state:time" unit="24h" type="dashed"
        color="red" background-color="transparent" point-background-color="red" point-radius="0" border-width="3"
        label="Durchschnitt&nbsp;&nbsp;">
    </ftui-chart-data>
    <ftui-chart-data stepped log="{{logfile}}" spec="4:{{device}}.Durchschnitt" class="size-6"
        [update]="{{logfile}}:state:time" unit="24h" type="dashed"
        color="#333333" background-color="#333333" point-background-color="#333333" point-radius="0" border-width="6">
    </ftui-chart-data>
<ftui-chart-controls unit="day" units="hour, day, 24h, week, month" margin="0" size="5" class="size-5"></ftui-chart-controls>
</ftui-chart>