Chart.js

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 https://www.chartjs.org/docs/latest/getting-started/installation.html npm install chart.js tai seuraavan JavaScript-koodin avullahttps://www.chartjs.org/docs/latest/getting-started/ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Kaaviotyypit aluekaavio () https://www.chartjs.org/docs/latest/charts/area.html pylväskaavio () https://www.chartjs.org/docs/latest/charts/bar.html kuplakaavio () https://www.chartjs.org/docs/latest/charts/bubble.html donitsi- ja piirakkakaavio (doughtnut and pie chart) https://www.chartjs.org/docs/latest/charts/doughnut.html viivakaavio () https://www.chartjs.org/docs/latest/charts/line.html yhdistelmäkaavio () https://www.chartjs.org/docs/latest/charts/mixed.html polaari-aluekaavio () https://www.chartjs.org/docs/latest/charts/polar.html hämähäkkikaavio ()https://www.chartjs.org/docs/latest/charts/radar.html pistekaavio () https://www.chartjs.org/docs/latest/charts/scatter.html

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>

Lisenssi MIT-lisenssihttps://github.com/chartjs/Chart.js/blob/master/LICENSE.md.

Lähteet

Aiheesta muualla https://www.chartjs.org/

Luokka:JavaScript