Chart

De donut chart maakt gebruik van een HTML canvas om de chart te kunnen tekenen. Om de donut chart te tekenen, instantieer je de DonutChart class en zet je vervolgens de waarde (als percentage zonder procentteken). Wanneer je de draw() functie op de donut chart aanroept, zal de chart getekend worden.

Overgebleven leenruimte studiejaar 2018/2019

€ 2.000,00
over van € 10.000,00
<script>
            System.import('/uno/components/donut-chart/donut-chart.js').then(function (module) {
                var donutChart = new module.DonutChart(document.getElementById('example_donut-chart'));
                donutChart.value = 80;
                donutChart.draw();
            });
        </script>

Donut chart kleuren

De donut chart wordt standaard getekend met de kleur #007bc7 (Hemelblauw). Om deze kleur te veranderen kun je een modifier class met één van de andere huisstijl kleuren meegeven, bijvoorbeeld donut-chart--groen. Het gevulde deel van de chart, alsook de subtitle en de tekst binnen de chart krijgen dan deze kleur. Het niet gevulde deel van van de chart is altijd een 20% transparantie van de hoofdkleur.

Overgebleven leenruimte studiejaar 2018/2019

€ 2.500,00
over van € 10.000,00
<script>
            System.import('/uno/components/donut-chart/donut-chart.js').then(function (module) {
                var donutChart = new module.DonutChart(document.getElementById('example_donut-chart'));
                donutChart.value = 80;
                donutChart.draw();
            });
        </script>

Donut chart met kleine text

In sommige situaties kan het handig zijn om een iets kleinere text met verduidelijking in de donut chart te hebben staan. Met de modifier donut-chart__inner--small op een element in het donut-chart__inner element kun je de tekst verkleinen.

Overgebleven leenruimte studiejaar 2018/2019

24
maanden
over van 48 maanden
<script>
            System.import('/uno/components/donut-chart/donut-chart.js').then(function (module) {
                var donutChartSmall = new module.DonutChart(document.getElementById('example_donut-chart-small'));
                donutChartSmall.value = 50;
                donutChartSmall.draw();
            });
        </script>

Javascript API

Constants

Constant Waarde
INNER_COLOR #ffffff
GLOBAL_ALPHA_OPACITY 0.2

Publieke eigenschappen

Eigenschap Type Omschrijving
value number Percentage van de donut chart dat gevuld moet worden.

Publieke methodes

Methode Omschrijving
draw() Draw de donut chart.
destroy() Destroy de donut chart.

Benodigde stylesheets

  • /uno/components/donut-chart/donut-chart.css