Chart.js on avoimen lähdekoodin JavaScript-kirjasto HTML5-pohjaisten kaavioiden luomiseen.
Käyttöönotto
Chart.js on saatavilla GitHubista, asentamalla npm:n kautta komennolla
npm install chart.js
tai seuraavan JavaScript-koodin avulla
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Kaaviotyypit
- aluekaavio (engl. area chart)
- pylväskaavio (engl. bar chart)
- kuplakaavio (engl. bubble chart)
- donitsi- ja piirakkakaavio (doughtnut and pie chart)
- viivakaavio (engl. line chart)
- yhdistelmäkaavio (engl. mixed chart)
- polaari-aluekaavio (engl. polar area chart)
- hämähäkkikaavio (engl. radar chart)
- pistekaavio (engl. scatterplot)
Esimerkki kaavion lisäämisestä
Kaavion saa lisättyä HTML-koodiin canvas-tägin avulla seuraavasti:
<canvas id="myChart"></canvas>
Seuraavan koodin avulla voidaan luoda viivakaavio
<script> const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data: data, options: {} }; </script>
Lopuksi kaavio renderöidään seuraavasti
<script> const myChart = new Chart( document.getElementById('myChart'), config ); </script>
