Chart mit CSS

[Dragosius]

Hallo,

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


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]

Wenn es um Charts geht, ist es wenig zu empfehlen, das Rad neu zu erfinden, sondern eine ausgereifte Bibliothek wie chartjs einzusetzen:
Chart.js | Open source HTML5 Charts for your website

 

[Dragosius]

Danke dir, also doch JS.

Ich würde sagen, dass ich das Folgende brauche:
Bar Chart Border Radius | Chart.js (bzw: Chart.js/border-radius.md at master · chartjs/Chart.js)

Wie genau kriege ich da jetzt mein PHP-Array mit den Werten rein?


Vielen Dank

 

[Sempervivum]

Am einfachsten ist es, das Array in JSON zu kodieren und einer Javascript-Variablen zuzuweisen:

<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]

Leider bräuchte ich hier nochmal Hilfe.

Das Ganze sieht bei mir leider noch unterschiedlich aus.

Die "Orignal"-Daten sehen so aus:

data: [12, 19, 3, 5, 2, 3, 4, 5],

Wenn ich es wie von dir vorgeschlagen einbaue, sieht es so aus:

data = {"193":108671,"192":108421,"191":108171,"189":108120,"188":107870,"187":107620, ...

Das PHP-Array sieht folgendermaßen aus:

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.

 

[Sempervivum]

Versuche, dass Array in PHP umzuwandeln durch die Funktion array_values:
PHP: array_values - Manual
Aber brauchst Du die Schlüssel nicht um die x-Achse zu beschriften?

 

[Sempervivum]

Am Ende von data steht ein Semikolon, ersetze es durch ein Komma.

-20597,-27392,108921];

 

[Dragosius]

Am Ende von data steht ein Semikolon, ersetze es durch ein Komma.

-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?

borderColor: [
    'rgba(255, 159, 64, 1)'
],

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

 

[Sempervivum]

Wie kann ich an folgender Stelle eine css-Klasse verwenden?

Ich weiß nicht genau wie Du das meinst. chartjs zeichnet die Grafik in ein Canvas, das man mit CSS nicht stylen kann.

 

[Dragosius]

Ich meine die beiden Stellen:


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?