EChart editieren/parametrisieren [gelöst]

[legro]

Nachdem ich den FlexCharts Adapter von @jrbwh erfolgreich ans Laufen gebracht habe, möchte ich natürlich meine Charts nach meinen Wünschen gestalten können. Ohne Hilfe - fürchte ich - wird mir das wohl kaum gelingen.

mein Vorhaben ..

Ich habe ein Chart erstellt, das die primären und erzeugten Energien unserer Wärmepumpe für Warmwasser und Heizen im Laufe eines Monats darstellt. Einige Einstellungen (Titel (s. Quellcode Zeile 3), Achsennamen (22, 66), Schriftgrößen (24, 70), Bereich zoomen (79), ..) vermochte ich auch zu ändern.

was mir fehlt ..

• Den darkmode bekomme ich über die API nicht aktiviert (s. Zeile 2).
• Die Positionierung center des Diagrammtitels überschreibt mir Elemente des Diagramms.
• usw.

meine Hoffnung ..

Gibt es Leidensgenossen, die sich bereits erfolgreich(er) mit alldem beschäftigen haben und mir Tipps dazu geben können?

Quellcode ..

{
  "darkMode": true,
  "title": {
    "text": "Energien: Warmwasser, Heizung",
    "left": "right",
    "textStyle": {
      "fontSize": 20
    }
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "shadow"
    }
  },
  "legend": {},
  "xAxis": [
    {
      "axisLabel": {
        "fontSize": 20
      },
      "name": "[Tage]",
      "nameLocation": "end",
      "nameTextStyle": {
        "color": "#000000",
        "fontSize": 20
      },
      "type": "category",
      "data": [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31
      ]
    }
  ],
  "yAxis": [
    {
      "name": "[Energien]",
      "nameLocation": "end",
      "nameTextStyle": {
        "color": "#000000",
        "fontSize": 20
      },
      "type": "value",
      "axisLabel": {
        "formatter": "{value} KWh",
        "fontSize": 20
      }
    }
  ],
  "dataZoom": [
    {
      "show": true,
      "start": 0,
      "end": 100
    }
  ],
  "series": [
    {
      "name": "Wasser (primär)",
      "type": "bar",
      "barGap": "30%",
      "color": "#0000ff",
      "stack": "Wasser",
      "data": [
        1.1,
        0,
        1.6,
        1.4,
        1.2,
        1.2,
        1.1,
        1,
        1.4,
        1.1,
        0.9,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        2.3,
        1.2,
        1.4,
        1.1,
        2.1,
        0,
        0,
        1.6,
        1.4,
        1.1,
        1.2,
        1.4,
        0
      ]
    },
    {
      "name": "Wasser (erzeugt)",
      "type": "bar",
      "barGap": "30%",
      "color": "#ff0000",
      "stack": "Wasser",
      "data": [
        3.9,
        0,
        5.9,
        4.9,
        4.1,
        4.4,
        4.4,
        4.1,
        5.5,
        4.1,
        2.9,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        9.6,
        4.3,
        5.2,
        3.8,
        6.4,
        0,
        0,
        6.5,
        6,
        4,
        4.9,
        5.1,
        0
      ]
    },
    {
      "name": "Heizung (primär)",
      "type": "bar",
      "barGap": "30%",
      "color": "#7f7Fff",
      "stack": "Heizung",
      "data": [
        0,
        0,
        0,
        0,
        0,
        0,
        3.3,
        2.9,
        3.2,
        3.9,
        6.8,
        4.1,
        0,
        0,
        0,
        0,
        0,
        0,
        3.9,
        4.4,
        2.9,
        4.6,
        4.7,
        5.8,
        3.3,
        4.1,
        2.7,
        2.4,
        3.1,
        3.1,
        1.4,
        0
      ]
    },
    {
      "name": "Heizung (erzeugt)",
      "type": "bar",
      "barGap": "30%",
      "color": "#ff7f7f",
      "stack": "Heizung",
      "data": [
        0,
        0,
        0,
        0,
        0,
        0,
        30.8,
        28.2,
        27.1,
        28.7,
        42.1,
        21.3,
        0,
        0,
        0,
        0,
        0,
        0,
        33.7,
        31.5,
        26.6,
        32.6,
        30.4,
        35,
        24.6,
        29.1,
        23.3,
        20.6,
        21.9,
        24.7,
        10.5
      ]
    }
  ]
}

.. und was dabei herauskommt ..

Code zum Aufbereiten der Daten ..

• JSON des Charts aus Objektbaum mit JSON.parse .. einlesen und im RAM allokieren
• Das Chart(Objekt) mit (neuen) Daten füllen
• Das Chart mit stringify zurück als JSON in den Objektbaum schreiben

console.log(getState("0_userdata.0.FlexCharts.EnergienHeizenWasser").val)
let Chart = JSON.parse(getState("0_userdata.0.FlexCharts.EnergienHeizenWasser").val)

let srcWP0 = "e3oncan.0.Vitocal.tree.1311_EnergyConsumptionDomesticHotWaterMonthMatrix.CurrentMonth."
let srcWP
let srcWG0 = "e3oncan.0.Vitocal.tree.1392_GeneratedDomesticHotWaterOutputMonthMatrix.CurrentMonth."
let srcWG
let srcHP0 = "e3oncan.0.Vitocal.tree.1294_EnergyConsumptionCentralHeatingMonthMatrix.CurrentMonth."
let srcHP
let srcHG0 = "e3oncan.0.Vitocal.tree.1315_GeneratedCentralHeatingOutputMonthMatrix.CurrentMonth."
let srcHG

for (let i=0; i<31; i++) {

    let d = '00' + String(i+1)
    d = d.slice(-2)

    //Quelllobjektadresse
    srcWP = srcWP0 + d
    srcWG = srcWG0 + d
    srcHP = srcHP0 + d
    srcHG = srcHG0 + d

    Chart.series[0].data[i] = getState(srcWP).val
    Chart.series[1].data[i] = getState(srcWG).val
    Chart.series[2].data[i] = getState(srcHP).val
    Chart.series[3].data[i] = getState(srcHG).val
}

setState("0_userdata.0.FlexCharts.EnergienHeizenWasser",JSON.stringify(Chart),true)

[BananaJoe]

@legro sagte in EChart editieren/parametrisieren:

Den darkmode bekomme ich über die API nicht aktiviert.

Stell den eChart auf "transparenten Hintergrund" bzw. im Widget setze den Haken dafür.
Passe die Farben der Linien und Beschriftung an - und schon hast du deinen "Dark Mode"

[legro]

@bananajoe

Danke für deine Hinweise.

Aber genau das - sozusagen ein eigenes Theme erstellen - wollte ich mir ersparen. Wozu gibt es sonst den Darkmode? Bei den vielen Textelementen habe ich dann jedoch einiges an Bastelei vor der Brust. Wenn‘s partout nicht anders geht, werde ich das tun müssen.

[MCU]

@legro sagte in EChart editieren/parametrisieren:

Den darkmode bekomme ich über die API nicht aktiviert.

[legro]

@mcu

Vielen Dank, so funktioniert‘s.

[jrbwh]

• Die Positionierung center des Diagrammtitels überschreibt mir Elemente des Diagramms.

Man kann die Position der Legende verschieben mit legend: { top: '10%' }

Dann funktioniert 'center' für den Titel ohne Überschneidung.

Gruß, Jürgen

[legro]

@jrbwh

Vielen Dank für den Tipp. Wieder ein Stück weiter.

Jetzt geht's daran, die Monatsangaben zu bearbeiten: Den Monatsname in den Titel aufnehmen. Nicht jeder Monat hat schließlich 31 Tage. .. Aber das alles sollte kein allzu großes Problem sein, schließlich liegt bei meinem Vorgehen das Chart als Objekt im RAM zur Bearbeitung vor.

Und so sieht das Ganze in einem iFrame in der Visualisierung aus ..