CSS Empfehlungen für Kreisdiagramme?

Dsimon24

Lt. Junior Grade
Dabei seit
Aug. 2016
Beiträge
357
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
 

Anhänge

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
8.895

Dsimon24

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
357
Ich danke euch. Ich habe jetzt was mit Google Charts erschaffen.

HTML:
        <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

Ensign
Dabei seit
Nov. 2010
Beiträge
210
HTML:
      <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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
357
Ah, da hatte doch noch was in meinem Basteln gefehlt - ich danke dir!
 

Dsimon24

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
357
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.

HTML:
      <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

Ensign
Dabei seit
Feb. 2003
Beiträge
207
So viele width und height properties sehe ich nicht,
mit denen du es probieren könntest.
 

Dsimon24

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
357
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

Ensign
Dabei seit
Feb. 2003
Beiträge
207
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.
Code:
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.
 
Top