CSS Empfehlungen für Kreisdiagramme?

[Dsimon24]

Hallo zusammen,

gerne möchte ich mittels HTML und CSS (wenn notwendig auch JS) ein Kreisdiagramm
erstellen. Ähnlich so, wie im Beispiel im Anhang. In der Mitte möchte ich einen Text (quasi
als Bezeichnung) einfügen. Das Diagramm soll zwei Werte darstellen. Beispielsweise:

100% sind alle Kunden in Deutschland: bspw. 10.000.
Innerhalb NRW haben 750 Kunden was bestellt.
Innerhalb DE haben 1.500 Kunden was bestellt.

Die erste Farbe soll die 750 Kunden darstellen, die zweite Farbe auf die 1.500 Kunden gehen.
Gibt es eine einfache Möglichkeit oder mglw. ein Script, um das zu realisieren? Ich finde
leider nur ganz simple Diagramme. Vielleicht hat einer einen Tipp für mich.

VG, David

 

[derlorenz]

Google: css pie chart
Ergebnis: https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e

 

[FranzvonAssisi]

Und in der Mitte dann halt noch einen Kreis einfügen...

 

[benneq]

Nimmt man für sowas nicht eher SVG? Aber mit CSS geht's natürlich auch
SVG Beispiel: https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936

 

[Dsimon24]

Ich danke euch. Ich habe jetzt was mit Google Charts erschaffen.

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
          google.charts.load("visualization", "1", { packages: ["corechart"] });
          google.charts.setOnLoadCallback(init);
          function drawChart(myID, titler, known, unknown) {
            var data = google.visualization.arrayToDataTable([
              ['Knowledge', 'Out of 10'],
              ['Known', known],
              ['Unknown', unknown]
            ]);
            var options = {
              title: titler,
              pieHole: 0.7,
              colors: ['#dd0000', '#cdcdcd'],
              pieSliceText: 'none',
              legend: { position: 'none' },
              tooltip: { text: 'percentage' },
              tooltip: { textStyle: { fontSize: 12 } },
              backgroundColor: '#F1F9F9'
            };

            var chart = new google.visualization.PieChart(document.getElementById(myID));
            chart.draw(data, options);
          }
          function init() {
            drawChart('donutchart1', 'VB.NET', 8, 2);
            drawChart('donutchart2', 'Javascript', 4, 6);
          }
        </script>

        <style>
          .donutCell
          {
            position: relative;
          }

          .donutDiv
          {
            width: 256px;
            height: 256px;
          }

          .centerLabel
          {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 256px;
            line-height: 256px;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 36px;
            color: maroon;
          }
        </style>

        <table class="Charts" style="border:none;">
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart1" class="donutDiv"></div>
              <div class="centerLabel">8/10</div>
            </td>
          </tr>
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart2" class="donutDiv"></div>
              <div class="centerLabel">4/10</div>
            </td>
          </tr>
        </table>

Dort haben wir jetzt zwei Angaben in jeweils einer Farbe.
Wenn ich da jetzt noch eine dritte Angabe machen könnte,
wäre es ideal. Vielleicht hat einer eine Idee, wo ich dazu im
Code ansetzen muss?

 

[max40]

      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
          google.charts.load("visualization", "1", { packages: ["corechart"] });
          google.charts.setOnLoadCallback(init);
          function drawChart(myID, titler, known, unknown, ddd) {
            var data = google.visualization.arrayToDataTable([
              ['Knowledge', 'Out of 10'],
              ['Known', known],
              ['Unknown', unknown],
              ['Ddd', ddd]
            ]);
            var options = {
              title: titler,
              pieHole: 0.7,
              colors: ['#dd0000', '#cdcdcd', '#123456'],
              pieSliceText: 'none',
              legend: { position: 'none' },
              tooltip: { text: 'percentage' },
              tooltip: { textStyle: { fontSize: 12 } },
              backgroundColor: '#F1F9F9'
            };

            var chart = new google.visualization.PieChart(document.getElementById(myID));
            chart.draw(data, options);
          }
          function init() {
            drawChart('donutchart1', 'VB.NET', 8, 2, 3);
            drawChart('donutchart2', 'Javascript', 4, 6, 3);
          }
        </script>

 

[Dsimon24]

Ah, da hatte doch noch was in meinem Basteln gefehlt - ich danke dir!

 

[Dsimon24]

Nochmal hallo zusammen,

leider komme ich mit dem Diagramm noch immer nicht so richtig zurecht.
Ich konnte jetzt grob realisieren, was ich erreichen möchte. Nun habe ich vier
Kreisdiagramme untereinander stehen - so sollte es auch sein. Wie kann ich
die Kreisdiagramme aber ein wenig verkleinern, damitich nicht zu sehr scrollen
muss, um in´s vierte Diagramm zu gelangen? Kann ich es im Code anpassen?
Untereinander sollten die aber schon stehen bleiben.

      <div class="col-md-2">

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
          google.charts.load("visualization", "1", { packages: ["corechart"] });
          google.charts.setOnLoadCallback(init);
          function drawChart(myID, titler, known, unknown, ddd) {
            var data = google.visualization.arrayToDataTable([
              ['Knowledge', 'Out of 10'],
              ['Known', known],
              ['Unknown', unknown],
              ['Ddd', ddd]
            ]);
            var options = {
              title: titler,
              pieHole: 0.7,
              colors: ['#dd0000', '#dd0000', '#00dd00'],
              pieSliceText: 'none',
              legend: { position: 'none' },
              tooltip: { text: 'percentage' },
              tooltip: { textStyle: { fontSize: 12 } },
              backgroundColor: '#F1F9F9'
            };

            var chart = new google.visualization.PieChart(document.getElementById(myID));
            chart.draw(data, options);
          }
          function init() {
            drawChart('donutchart1', 'xxx', 9.5, 0.5, 0);
            drawChart('donutchart2', 'ccc', 3, 6, 1);
            drawChart('donutchart3', 'vvv', 3, 6, 1);
            drawChart('donutchart4', 'bbb', 3, 6, 1);
          }
        </script>

        <style>
          .donutCell
          {
            position: relative;
          }

          .donutDiv
          {
            width: 256px;
            height: 256px;
          }

          .centerLabel
          {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 256px;
            line-height: 256px;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 36px;
            color: maroon;
          }
        </style>

        <table class="Charts" style="border:none;">
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart1" class="donutDiv"></div>
              <div class="centerLabel">8/10</div>
            </td>
          </tr>
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart2" class="donutDiv"></div>
              <div class="centerLabel">4/10</div>
            </td>
          </tr>
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart3" class="donutDiv"></div>
              <div class="centerLabel">4/10</div>
            </td>
          </tr>
          <tr style="border:none;">
            <td class="donutCell" style="border:none;">
              <div id="donutchart4" class="donutDiv"></div>
              <div class="centerLabel">4/10</div>
            </td>
          </tr>
        </table>

      </div>

VG, David

 

[mastaqz]

So viele width und height properties sehe ich nicht,
mit denen du es probieren könntest.

 

[Dsimon24]

Weil die, die ich bereits probiert habe, nicht funktionieren.
Ich würde mich freuen, wenn du mir einen Tipp geben
könntest, wo ich ansetzen könnte.

 

[mastaqz]

Deshalb kannst du dir helfen, indem du die Dokumentation der benutzten JavaScript-Bibliothek suchst:
1. Google: "google charts piechart"
2. Treffer: https://developers.google.com/chart/interactive/docs/gallery/piechart
3. Nach etwas wie "options" suchen, zufällig gibt es var options = {...} in deinem Code.
4. Dort siehst du nun alle Eigenschaften, die du den Optionen hinzufügen kannst.
5. Nach etwas wie "width" suchen.
6.

width
Width of the chart, in pixels.
Type: number
Default: width of the containing element

Die Breite sollte sich also theoretisch automatisch an donutDiv anpassen.
Dein Innentext bleibt dann natürlich wie du ihn erstellt hast,
u.a. da du ihm eine feste Breite gegeben hast.
Anschauen kannst du das, indem du mal einen Rahmen um die einzelnen divs mit border: 1px solid blue machst.

Deshalb solltest du Code, den du von Stackoverflow kopierst, auch verstehen und nicht nur einfügen.
Am besten überlegst du dir, weshalb zig Male "256px" vorhanden sind und wie sie miteinander interagieren.

Du solltest dir prinzipiell vor der Erstellung des Codes ein wenig mehr Gedanken darüber machen,
welche Lösungsmöglichkeiten es gibt und welche Vor- und Nachteile sie haben.

In der Stackoverflow-Lösung hast du den Nachteil,
dass das Label nun über dem Chart liegt und somit der Hover-Effekt nicht mehr nutzbar ist.

 

[GustlPC]

Ich nutze für Diagramme immer C3
https://c3js.org/samples/chart_donut.html
https://c3js.org/samples/chart_pie.html
Doku: https://c3js.org/reference.html