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

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>

Lisenssi

MIT-lisenssi.

Aiheesta muualla

• https://www.chartjs.org/