plot.period: Dynamische Balkenfarbe (zones) bei Säulendiagramm funktioniert nicht

[eloboy]

Hallo zusammen,

ich versuche in der smartVisu (v3.6) eine PV-Prognose als Säulendiagramm (column) zu visualisieren. Dabei sollen die Balken je nach Ertrag die Farbe wechseln: Alles bis 5 kWh in Grün, alles dar über in Gelb.

Mein Problem: Sobald ich colorByPoint: false setze, wird der gesamte Plot einfarbig. Lasse ich es auf true (oder weg), würfelt Highcharts die Farben bunt durcheinander (siehe Screenshot), ignoriert aber meine definierten Zonen.


chart(2).png

Hier ist mein aktueller Widget-Aufruf:

{{plot.period(    '',    ['PV_Prognose.Serie'],    'raw',    '12h',    '-48h',    '',    '',    '',    ['Ertrag Prognose'],    [''],    ['column'],    '',    '',    '',    '',    '',    '',    'kwh',{plotOptions:{column:{colorByPoint: true,          zoneAxis: 'y',          zones: [{value: 5, color: '#00AA00'},{color: '#FFFF00'}]}}},    '',    ['0', '1', '2'],    2,    'EHZ.Strom.PlotPV_Prognose'  )}}

Was ich bereits geprüft habe:

1. Daten: Die Werte kommen sauber als Zahlen (Floats) an (z.B. 1.16, 7.80, 12.24).
2. Highcharts: In einem externen JSFiddle mit den gleichen Optionen und Rohdaten funktioniert die Logik einwandfrei.
3. Zeitraum: Die Daten sind vorhanden (72h Fenster).
4. Browser: Cache wurde geleert, Tests in Firefox und Chrome zeigen das gleiche Verhalten.

Die Frage: Hat jemand erfolgreich zones in Verbindung mit column in plot.period im Einsatz? Muss die Konfiguration für die Series-Optionen (Parameter 18) bei smartVisu anders übergeben werden, damit colorByPoint: false nicht die Zonen-Logik „killt“?

Anbei ein Screenshot vom aktuellen (bunten) Zustand und die Datentabelle.

Vielen Dank für eure Hilfe!

[wvhn]

Moin eloboy,

mit dem Chartoptions-Parameter kann man alle Highcharts-Optionen des Widgets überschreiben. Dabei ist wichtig zu wissen, dass das Widget Highcharts in den styledMode schaltet. Wenn Du den styledMode mit

chart: { styledMode: false }

ausschaltest, sollten Deine Optionen funktionieren. Allerdings gehen dann auch die speziell zum Design der Visu abgestimmten Farben verloren und Du musst diese ggfls. In den Chartoptions definieren.

Alternativ kannst Du nachsehen, ob man die Zonen als Klassen angeben kann, die dann in der visu.css definiert werden.

Gruß
Wolfram

[wvhn]

So funktioniert es:

Widget-Aufruf:

{{plot.period('', 'PV_Prognose.Serie', 'raw', '12h', '-48h', '', '', '', 'Ertrag Prognose', '', 'column', '', '', '', '', '', '', 'kwh', {plotOptions:{column:{colorByPoint: false, zoneAxis: 'y', zones: [{value: 5, className: 'energy-zone-1'},{className: 'energy-zone-2'}]}}},'', '', 2)}}

visu.css im Ordner der eigenen Seiten:

.energy-zone-1{
    stroke: #00AA00;
    fill: #00AA00;
}
.energy-zone-2{
    stroke: #FFFF00;
    fill: #FFFF00;
}​

Achtung mit dem letzten Parameter: in Deinem Widget-Aufruf hast Du dort einen item-Namen. Es dürfen aber nur die Worte 'item‘ oder 'database' verwendet werden - je nachdem ob das vorne angegebene item die Werte als Array enthält, oder eine Zeitreihe aus der Datenbank abgerufen wird..

Gruß
Wolfram