Chart mit CSS

Dragosius

Erfahrenes Mitglied
Hallo,

kann mir jemand eine Starthilfe, um ein Chart in diesem Stil (nur gerne schöner) zu realisieren?

1649099362848.png
Ich übergebe im einem Array die Werte und diese sollen im so einem Chart dargestellt werden.
Aktuell wird leider jede Reihe in einem div sehr kompliziert dargestellt, daher wollte ich es mal anpacken, das sauber in css darzustellen.


Vielen Dank
 

Sempervivum

Erfahrenes Mitglied
Am einfachsten ist es, das Array in JSON zu kodieren und einer Javascript-Variablen zuzuweisen:
Code:
<script>
    // Angenommen, dein PHP-Array steht in der Variablen $data
    const data = <?php echo json_encode($data); ?>;
    // Jetzt steht das Array in der Javascript-Variablen data und Du kannst 
    // diese an chart.js übergeben.
Oder mit Ajax und der fetch-API:
Using the Fetch API - Web APIs | MDN
Das erste kurze Beispiel.
 

Dragosius

Erfahrenes Mitglied
Leider bräuchte ich hier nochmal Hilfe.

Das Ganze sieht bei mir leider noch unterschiedlich aus.

Die "Orignal"-Daten sehen so aus:
Code:
data: [12, 19, 3, 5, 2, 3, 4, 5],

Wenn ich es wie von dir vorgeschlagen einbaue, sieht es so aus:
Code:
data = {"193":108671,"192":108421,"191":108171,"189":108120,"188":107870,"187":107620, ...

Das PHP-Array sieht folgendermaßen aus:
Code:
array(148) {
  [193]=>
  int(108671)
  [192]=>
  int(108421)
  [191]=>
  int(108171)
  [189]=>
  int(108120)
  [188]=>
  int(107870)
  [187]=>
  int(107620)
  [186]=>
  int(107370)
  [185]=>
  int(107120)
  [183]=>
  int(106998)
  [182]=>
  int(106748)
  [181]=>
  int(106498)
  [180]=>
  int(106248)
  ...

Ich brauche davon jeweils die int-Zahl.
 

Dragosius

Erfahrenes Mitglied
Am Ende von data steht ein Semikolon, ersetze es durch ein Komma.
Code:
-20597,-27392,108921];
Entschuldigung, jetzt steht deine Antwort so alleine da.
Ich hatte den Fehler gefunden.

Jetzt hätte ich leider noch eine Frage:
Wie kann ich an folgender Stelle eine css-Klasse verwenden?
Code:
borderColor: [
    'rgba(255, 159, 64, 1)'
],


Ich versuche so lange noch an den Feinheiten zu feilen.
ich denke ich lasse das Datum doch anzeigen. :)
 

Dragosius

Erfahrenes Mitglied
Ich meine die beiden Stellen:
1649151693276.png

Die Webseite gibt es in verschiedenen Farbvarianten und ich würde die entsprechende Farbe gerne aus meiner csss nehmen und an der Stelle nicht hardcoden.
Ist das möglich?