Hallo,
Ich wollte weitere Farben im Chart widget benutzen und habe dazu in meiner user.css folgendes eingefügt:
.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
hey, soweit ich das mit meinen CSS Skills überblicke ist in der chart.js nur der fill gradient bis gr_6 definiert
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 .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 #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
Danke, das wars!
Gruß
Eisix
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.
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.
'<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
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.