[gelöst]Chart Widget zusätzliche Farben

[Eisix]

Hallo,

Ich wollte weitere Farben im Chart widget benutzen und habe dazu in meiner user.css folgendes eingefügt:

Code Auswählen Erweitern


.ftui.l7 { stroke:#328da8; stroke-width:2px; fill:none; }
.ftui.l8 { stroke:#a87932; stroke-width:2px; fill:none; }
.ftui.l9 { stroke:#8ba832; stroke-width:2px; fill:none; }
.ftui.l7sym { stroke:#328da8; stroke-width:12px; fill:none; }
.ftui.l8sym { stroke:#a87932; stroke-width:12px; fill:none; }
.ftui.l9sym { stroke:#8ba832; stroke-width:12px; fill:none; }
.ftui.l7dash { stroke:#328da8; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l8dash { stroke:#a87932; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l9dash { stroke:#8ba832; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l6dot { stroke:#328da8; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l6dot { stroke:#a87932; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l6dot { stroke:#8ba832; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l7fill { stroke:#328da8; fill:url(#gr_ftui7); stroke-width:2px; fill-opacity:0.8 }
.ftui.l8fill { stroke:#a87932; fill:url(#gr_ftui8); stroke-width:2px; fill-opacity:0.8 }
.ftui.l9fill { stroke:#8ba832; fill:url(#gr_ftui9); stroke-width:2px; fill-opacity:0.8 }
text.ftui.l7, text.ftui.l7sym, text.ftui.l7dot, text.ftui.l7dash, text.ftui.l7fill { stroke:none; fill:#328da8; }
text.ftui.l8, text.ftui.l8sym, text.ftui.l8dot, text.ftui.l8dash, text.ftui.l8fill { stroke:none; fill:#a87932; }
text.ftui.l9, text.ftui.l9sym, text.ftui.l9dot, text.ftui.l9dash, text.ftui.l9fill { stroke:none; fill:#8ba832; }
tspan.ftui.l7, tspan.ftui.l7sym, tspan.ftui.l7dot, tspan.ftui.l7dash, tspan.ftui.l7fill { stroke:none; fill:#328da8; }
tspan.ftui.l8, tspan.ftui.l8sym, tspan.ftui.l8dot, tspan.ftui.l8dash, tspan.ftui.l8fill { stroke:none; fill:#a87932; }
tspan.ftui.l9, tspan.ftui.l9sym, tspan.ftui.l9dot, tspan.ftui.l9dash, tspan.ftui.l9fill { stroke:none; fill:#8ba832; }


Bei Linien plots funktioniert das auch, aber fill funktioniert nicht, wird weiter lediglich als Linie gezeigt. Fehlt da noch was?

Gruß
Eisix

[MKeY]

hey, soweit ich das mit meinen CSS Skills überblicke ist in der chart.js nur der fill gradient bis gr_6 definiert

Code Auswählen Erweitern

var defsFHEM =
                        "<defs>"+
                                '<linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">   <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>    <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"/>  </linearGradient>'+
                                '<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#f00; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#291; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#00f; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#f0f; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#ff0; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#0ff; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>  </linearGradient>'+
                                '<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>  </linearGradient>'+
                                '<pattern id="gr0_stripe" width="4" height="4"           patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)">      <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"/>  </pattern>'+
                                '<pattern id="gr1_stripe" width="4" height="4"           patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)">      <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"/>  </pattern>'+
                                '<linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset=  "0%" style="stop-color:#f00; stop-opacity:.6"/>    <stop offset= "50%" style="stop-color:#ff0; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"/>  </linearGradient>'+
                        '</defs>';

dein

Code Auswählen Erweitern

.ftui.l7fill { stroke:#328da8; fill:url(#gr_ftui7); stroke-width:2px; fill-opacity:0.8 }
.ftui.l8fill { stroke:#a87932; fill:url(#gr_ftui8); stroke-width:2px; fill-opacity:0.8 }
.ftui.l9fill { stroke:#8ba832; fill:url(#gr_ftui9); stroke-width:2px; fill-opacity:0.8 }
ist mit dem

Code Auswählen Erweitern

#gr_ftui7, #gr_ftui8 und #gr_ftui9 somit nicht in der js definiert.

Ergo:
entweder einen vorhandenen nehmen, oder die .js anpassen, als "eigene" .js abspeichern, damit das net vom update überschrieben wird
oder vllt kannst das auch im CSS angeben, das weiß ich nicht genau, sollte aber funktionieren

[Eisix]

Danke, das wars!

Gruß
Eisix

[eki]

Die Gradienten in der CSS Datei zu definieren, hatte ich am Anfang probiert, hat aber irgendwie nicht funktioniert, deshalb sind sie im js.

Falls Du neue Gradienten definiert hast, kann ich die auch in die widget_chart.js auf meiner Seite übernehmen, das würde dann mittelfristig auch in die mit FTUI ausgelieferte Version hinein kommen.

[Eisix]

Hallo Eki,

habe mal 3 Farben dazu gepackt die bei mir ganz gut passen. Wobei ich nicht wirklich durchblicke wo diese Änderungen noch Auswirkungen haben.

Code Auswählen Erweitern


'<linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">   <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>    <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"/>  </linearGradient>'+
'<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#f00; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#291; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#00f; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#f0f; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#ff0; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#0ff; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_7" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_8" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:;#ccc; stop-opacity:.4"/>  </linearGradient>'+
'<linearGradient id="gr_9" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>  </linearGradient>'+
'<pattern id="gr0_stripe" width="4" height="4"           patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)">      <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"/>  </pattern>'+
'<pattern id="gr1_stripe" width="4" height="4"           patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)">      <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"/>  </pattern>'+
'<linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset=  "0%" style="stop-color:#f00; stop-opacity:.6"/>    <stop offset= "50%" style="stop-color:#ff0; stop-opacity:.6"/>    <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"/>  </linearGradient>'+
'</defs>';

// include some more defs
var defs =
"<defs>"+
'<linearGradient id="gr_bgftui" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"   style="stop-color:#2A2A2A; stop-opacity:1"/>'+
'<stop offset="50%"  style="stop-color:#000; stop-opacity:1"/>'+
'<stop offset="100%" style="stop-color:#2A2A2A; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui0" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#553300; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#DDA400; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui1" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#333333; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#BBBBBB; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui2" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#880000; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#FF0000; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui3" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#555500; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#CCCC00; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui4" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#225522; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#33CC33; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui5" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#225555; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#33CCCC; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui6" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#222255; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#3333CC; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui7" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#222255; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#328da8; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui8" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#d0a462; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#896329; stop-opacity:1"/>'+
'</linearGradient>'+
'<linearGradient id="gr_ftui9" x1="0%" y1="0%" x2="0%" y2="100%">'+
'<stop offset="0%"  style="stop-color:#9fdf9f; stop-opacity:1"/>'+
'<stop offset="100%"   style="stop-color:#8ba832; stop-opacity:1"/>'+
'</linearGradient>'+



Gruß
Eisix

[eki]

OK, baue ich ein, werde demnächst sowieso mal eine neue Version des Charts freigeben.

Die Daten sind erst mal nur vordefiniert und landen als referenzierbare Verläufe im HTML, das das Chart baut. Solange man sie nicht referenziert (so wie Du in Deinem CSS), passiert da erst mal nichts.