Chart.js

Chart.js on suosittu avoimen lähdekoodin JavaScript-kirjasto, joka mahdollistaa kehittäjille interaktiivisten ja visuaalisesti houkuttelevien datavisualisointien luomisen verkkosovelluksiin. Kirjasto kehitettiin alun perin Nick Downien toimesta ja se julkaistiin ensimmäisen kerran vuonna 2013. Chart.js on saavuttanut laajan suosion sen yksinkertaisuuden, monipuolisuuden ja tyylikkyyden ansiosta grafiikkojen ja kaavioiden renderöinnissä.

Chart.js:n merkittäviä vahvuuksia ovat sen monipuoliset kaaviotyypit, jotka sisältävät aluekaavio, pylväskaavio, kuplakaavio, donitsi- ja piirakkakaavio, viivakaavio, yhdistelmäkaavio, polaari-aluekaavio, hämähäkkikaavio, pistekaavio. Tämä tekee siitä ihanteellisen työkalun erilaisiin datan visualisointitarpeisiin. Kirjaston käyttäjäystävällinen ohjelmointirajapinta mahdollistaa kaavioiden helpomman mukauttamisen, kuten värejä, otsikoita ja interaktiivisia ominaisuuksia muokkaamalla.

Chart.js hyödyntää HTML5:n ja Canvas-elementin teknologioita, mikä takaa korkean suorituskyvyn ja responsiivisuuden. Se on myös yhteensopiva monien modernien verkkokehityskehysten ja kirjastojen kanssa, mikä tekee siitä monipuolisen valinnan etupään kehittäjille. Se on saatavilla MIT-lisenssillä.

Ominaisuudet

Chart.js tarjoaa joukon usein käytettyjä kaaviotyyppejä, laajennuksia ja mukautusvaihtoehtoja. Kohtuullisten sisäänrakennettujen kaaviotyyppien lisäksi voit käyttää muita yhteisön ylläpitämiä kaaviotyyppejä . Tämän lisäksi on mahdollista yhdistää useita kaaviotyyppejä sekakaavioksi (olennaisesti yhdistämällä useita kaaviotyyppejä yhdeksi samalle kankaalle).

Chart.js on hyvin muokattavissa mukautetuilla laajennuksilla, joilla voidaan luoda huomautuksia, zoomata tai vetää ja pudottaa -toimintoja.

Integraatiot

Chart.js sisältää sisäänrakennetut TypeScript-kirjoitukset, ja se on yhteensopiva kaikkien suosittujen JavaScript-kehysten kanssa, mukaan lukien React , Vue , Svelte ja Angular . Voit käyttää Chart.js:ää suoraan tai hyödyntää hyvin ylläpidettyjä käärepaketteja, jotka mahdollistavat alkuperäisen integroinnin valitsemiesi kehysten kanssa.

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/