Како направити једноставан графикон са Цхарт.јс

by
Tweet
Share
Share
Pin

Визуелизација података на начин који људи могу разумети је веома важна у доба доношења одлука заснованих на подацима. Графикони и графикони нам помажу да лако разумемо сложене податке, трендове и обрасце.

Хајде да истражимо како да направимо једноставан графикон користећи Цхарт.јс, популарну ЈаваСцрипт библиотеку за визуелизацију података.

Шта је Цхарт.јс?

Цхарт.јс је бесплатна алатка која помаже програмерима да направе интерактивне графиконе за веб апликације. ХТМЛ5 елемент платна приказује графиконе, омогућавајући им да раде у модерним прегледачима.

Карактеристике Цхарт.јс

Карактеристике укључују:

  • Цхарт.јс се истиче по свом корисничком приступу. Са минималним кодом, програмери могу да направе интерактивне и визуелно привлачне графиконе.
  • Библиотека је разноврсна и подржава различите типове графикона као што су линије, траке, колачи и радари. Може задовољити различите потребе за представљањем података.
  • Цхарт.јс дизајнира графиконе да добро функционишу на десктоп и мобилним уређајима. Они су осетљиви и прилагодљиви.
  • Можете да промените Цхарт.јс графиконе користећи многе опције уместо подразумеваних подешавања. Програмери могу фино подесити графиконе да одговарају специфичним захтевима.

Постављање окружења

Библиотеку можете подесити на један од два начина:

Основна ХТМЛ структура

Да бисте уградили графикон, биће вам потребан елемент платна у ХТМЛ-у. Ево основне структуре:

 <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
   <h1>Welcome to My Data Representation</h1>
   <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

Да бисте стилизовали страницу, направите датотеку стиле.цсс и додајте јој следећи ЦСС:

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Tilt Neon", sans-serif;
  padding: 2rem 4rem;
}
h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

Прављење првог графикона: Пример тракастог графикона

За овај пример користићемо тракасти графикон, идеалан за поређење појединачних тачака података по категорији.

  Како додати транспарентност на било који прозор и закачити га на врх
  • У ознаци скрипте на дну вашег ХТМЛ-а почните тако што ћете изабрати елемент платна користећи његово својство ид: 
     let canvas = document.getElementById('myChart');
  • Затим набавите контекст како да прикажете свој графикон. У овом случају, то је контекст 2Д цртежа. 
     let ctx = canvas.getContext('2d');
  • Затим иницијализујте нови графикон на платну помоћу функције Цхарт(). Ова функција узима контекст платна као први аргумент, а затим објекат опција укључујући податке за приказ на графикону. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Затим попуните објекат опција да бисте навели тип графикона, податке и ознаке које желите у свом графикону. 
     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
        }],
      },
    };

    • Тренутно ваш графикон изгледа овако:

    Стилизирање и прилагођавање графикона

    Цхарт.јс нуди мноштво опција за прилагођавање графикона као што су:

    • Боје: Прилагодите боје графикона, од позадине трака до ивица линија, помоћу Цхарт.јс.
    • Легенде: Поставите легенде на врху, дну, лево или десно ради јасноће.
    • Објашњења: Користите описе алатки за детаљан увид у тачке података које се појављују када пређете мишем.
    • Анимације: Подесите стил и темпо анимација графикона за динамички приказ.

    Као једноставан пример, можете поставити неке основне стилове за свој скуп података тако што ћете променити објекат опција на следећи начин:

     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: "rgba(75, 192, 192, 0.2)",
          borderColor: "rgba(75, 192, 192, 1)",
          borderWidth: 1,
        }],
      },
    };

    Ваш графикон би сада требао изгледати овако:

      Свеобухватан водич за маркетиншке стручњаке

    Најбоље праксе и савети за перформансе

    Да бисте обезбедили оптималне перформансе приликом приказивања графикона:

    • Ограничите тачке података које се користе у Цхарт.јс ради бржег приказивања и бољег корисничког искуства.
    • Ако често ажурирате графикон, користите методу дестрои() да бисте уклонили стари графикон пре приказивања новог.

    Савети за избегавање уобичајених замки

    Ево неколико замки које треба избегавати:

    • Уверите се да су ваши подаци увек форматирани на исти начин како бисте спречили било каква изненађења.
    • Да бисте побољшали перформансе, најбоље је ограничити анимације. Иако могу да помогну у побољшању корисничког искуства, коришћење превише може да изазове проблеме.

    Цхарт.јс: Оснаживање визуелизације веб података

    Цхарт.јс је корисна алатка када желите да прикажете интерактивне податке на атрактиван начин. Можете лако да креирате прелепе визуелизације података које пружају увид и доносе одлуке.

    Цхарт.јс пружа снажно решење за визуелизацију података, без обзира да ли сте искусни или нови у развоју.