FTUI Chart Widget: Achsen ausblenden

Begonnen von Dia81, 17 November 2020, 11:09:27

Vorheriges Thema - Nächstes Thema

Dia81

Moin zusammen,

ich benötige beim Chart nur die Kurve, keine Achsen keine Beschriftungen nix.
Soweit alles in Ordnung aber mir wird immer die X- und Y-Achse als Linie angzeigt.

Jemand eine Idee wie ich das wegbekomme? Hab auch in der CSS irgendwie mit Oppacity gespielt aber alles ohne ERfolg. Wo muss ich da drehen? :>

MKeY

Müsste eigtl in der ftui_chart.css einstellbar sein (ändert dann natürlich alle charts)

/* Definition of specialities for x-axis */
.xaxis {
        stroke-width: 0px;
}
/* Definition of specialities for y-axis */
.yaxis {
        stroke-width: 0px;
}
/* Definition of specialities for y-axis */
.yticks {
        stroke-width: 0px;
Wer Fehler findet, darf sie behalten!
RPi's, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3S (MMU2S vorhanden, aber nervtötend)
Lowrider 2CNC

eki

#2
Änderungen im ftui_chart.css würde ich nicht machen, da die bei Updates überschrieben werden. Es ist besser eigene Anpassungen in fhem-tablet-ui-user.css zu machen (das muss dann natürlich im Header eingebunden sein). Da ich diese Möglichkeit aber für sinnvoll erachte, füge ich das auch ins ftui_chart.css ein, dann kommt es demnächst per default mit. Bis dahin, siehe Nachfolgendes.

Das sollte gehen:

1. Trage folgendes in fhem-tablet-ui-user.css ein:

.nobackground .chart-background
{
  fill-opacity: 0;
}

.noaxes .xaxis
{
  stroke-width: 0px;
}

.noaxes .yaxis
{
  stroke-width: 0px;
}


2. Setze beim Chart folgende Klassen:

<div class="nobackground noticks nobuttons noaxes" data-type="chart"...></div>


Das wirkt dann auch nur auf das mit diesen Klassen angegebene Chart und alle anderen können nach wie vor Achsen etc. haben.

Edit (18.11.2020:13:00): fill:none darf nicht gesetzt sein, sonst werden die Events für den Cursor nicht mehr erzeugt. Habe ich geändert.

Dia81

Perfekt! Vielen Dank! Klappt wunderbar