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