MKCharts

Ein einfaches Skript für die Darstellung von Kreis-Diagrammen.

Verwenden

Die Dateien bei GitHub herunterladen und im Header der HTML Datei hinzufügen:

<!DOCTYPE html>
<html>
  <head>  
    ...
    <link rel="stylesheet" href="mkscripts/css/mk_charts.css">
    <script defer src="mklscripts/js/mk_charts.js"></script>
  </head>
</html>

Die CSS-Datei wird nur für die Animation der Diagramme benötigt und ist optional.

Circle Charts

Um ein Kreisdiagramm darzustellen, wird nur das folgende div verwendet:

<div class="mkCharts" data-percent="15" />

Ohne weitere Angaben entspricht dies dem 1. Kreisdiagramm (15%).

Die weiteren Attribute sind optional und passen das Aussehen an.

Optional:
data-type      | default = circle
data-color     | default = #2F4F4F
data-size      | default = 100
data-stroke    | default = 1

Die oben gezeigten Charts wurden wie folgt erstellt:

<div class="mkCharts" data-percent="15"></div>
<div class="mkCharts" data-percent="42" data-color="#654321"></div>
<div class="mkCharts" data-percent="83" data-color="pink" data-size="125"></div>
<div class="mkCharts" data-percent="94" data-color="rgb(0,100,200)" data-size="155" data-stroke="3"></div>

Das war's!