KOMPOOS.NL

pie-chart - CSS

home » css » pie_chart.html

sitemap


pie-chart canvas | pie-chart javascript | pie-chart html5 | pie-chart css | pie-chart css3 | pie-chart php | pie-chart php met get | pie-chart svg


voorbeeld van een css pie-chart

uitleg css pie procedure

Om de oude en gebrekkige IE-browsers nog een beetje tegemoet te komen is er op de pagina de rond.htc gebruikt. Maar het zal geen enkel probleem zijn als je de code voor de "oude IE-rommel" niet gebruikt. Er zijn twee .png files gebruikt bij deze procedure. Dat zijn pie-chart.png en devide.png. Kopieer de files naar dezelfde directory waar je de html-file plaatst of pas het path aan. De stylesheet behoort in de head-sectie van de pagina thuis en de html-code in de body.

de chart instellen gaat als volgt:

In de stylesheet vind je de items chart-1 t/m chart-5. Daarin kan je het aantal graden aangeven van de desbetreffende "chart". Als de eerste chart (b.v.) 40deg moet zijn vul je bij alle browser-mogelijkheden 40deg in. Als de volgende chart 35deg moet zijn vul je daar 75deg in (0+40+35) enzovoort enzovoort. De kleuren van de legenda gaan op de sprite-manier. Met de negatieve pixel-waarden kan je exact bepalen welke kleuren-schakering je wilt gebruiken. Kijk even in de brocode hoe dat in zijn werk gaat...

Omdat de procedure geen enkel script gebruikt, is het natuurlijk wel allemaal "hand-werk". Maar het is natuurlijk een "fluitje van een cent" om met php of javascript alle parameters automatisch te verwerken. Deze pagina is alleen maar gemaakt om aan te tonen dat je, met enkel en alléén CSS, pie-charts kan maken.

html code voor de css pie chart procedure


<div id="css-pie-chart" class="ronde-pie">
        <b class="pie-chart-ondergrond ronde-pie"></b>
        <a href="/css/pie_chart.html"><b class="chart-1 ronde-pie"></b></a>
        <a href="/css/pie_chart.html"><b class="chart-2 ronde-pie"></b></a>
        <a href="/css/pie_chart.html"><b class="chart-3 ronde-pie"></b></a>
        <a href="/css/pie_chart.html"><b class="chart-4 ronde-pie"></b></a>
        <a href="/css/pie_chart.html"><b class="chart-5 ronde-pie"></b></a>
</div>
<div class="legenda-chart">
        <ul>
                <li><span class="legenda-css-pie-chart" style="background-position: -70px -40px;"></span>69% rode pie chart</li>
                <li><span class="legenda-css-pie-chart" style="background-position: -90px -70px;"></span>61% donkerblauwe pie chart</li>
                <li><span class="legenda-css-pie-chart" style="background-position: -50px -90px;"></span>60% lichtblauwe pie chart</li>
                <li><span class="legenda-css-pie-chart" style="background-position: -10px -80px;"></span>80% groene pie chart</li>
                <li><span class="legenda-css-pie-chart" style="background-position: -10px -40px;"></span>45% gele pie chart</li>
                <li><span class="legenda-css-pie-chart" style="background-position: -30px -20px;"></span>45% oranje pie chart</li>
        </ul>
</div>
<div class="clear-pie"></div>

stylesheet voor de piechart procedure


<style type="text/css">
        #css-pie-chart{float:left;
                width:140px;
                height:140px;   
                background:url(basis.png);
                margin:0 0 0 40px}
        .ronde-pie{
                -moz-border-radius:70px;
                -webkit-border-radius:70px;
                -o-border-radius:70px;
                border-radius:70px}
        .pie-chart-ondergrond{
                position:absolute;
                background:url('devide.png');
                width:140px;
                height:140px;
                -webkit-transform:rotate(0deg);
                -moz-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                -ms-transform:rotate(0deg);
                transform:rotate(0deg)}
        .chart-1,.chart-2,.chart-3,.chart-4,.chart-5{
                clip:rect(0px, 140px, 140px, 70px);
                position:absolute;
                background:url('devide.png');
                width:140px;
                height:140px}
        .chart-1{
                -webkit-transform:rotate(69deg);
                -moz-transform:rotate(69deg);
                -o-transform:rotate(69deg);
                -ms-transform:rotate(69deg);
                transform:rotate(69deg)}
        .chart-2{
                -webkit-transform:rotate(130deg);
                -moz-transform:rotate(130deg);
                -o-transform:rotate(130deg);
                -ms-transform:rotate(130deg);
                transform:rotate(130deg)}
        .chart-3{
                -webkit-transform:rotate(190deg);
                -moz-transform:rotate(190deg);
                -o-transform:rotate(190deg);
                -ms-transform:rotate(190deg);
                transform:rotate(190deg)}
        .chart-4{
                -webkit-transform:rotate(270deg);
                -moz-transform:rotate(270deg);
                -o-transform:rotate(270deg);
                -ms-transform:rotate(270deg);
                transform:rotate(270deg)}
        .chart-5{
                -webkit-transform:rotate(315deg);
                -moz-transform:rotate(315deg);
                -o-transform:rotate(315deg);
                -ms-transform:rotate(315deg);
                transform:rotate(315deg)}
        .legenda-css-pie-chart{
                background:transparent url(basis.png) no-repeat;
                margin-right:4px;
                display:inline-block;
                width:40px;
                height:8px}
        .legenda-chart{
                font-size:smaller;
                width:100%;
                margin-left:160px}
        .legenda-chart ul li{
                list-style-type:none;
                margin-bottom:2px}
        .clear-pie{clear:both}
</style>
<!--[if lt IE 9]>
        <style type="text/css">
                .ronde-pie{
                        behavior:url(rond.htc)}
        </style>
<![endif]-->
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.