Постоји прилично неколико ЈаваСцрипт библиотека за цртање различитих графикона, у распону од тракастих до линијских графикона и још много тога. Ако учите како да динамички приказујете податке на својој веб локацији помоћу ЈаваСцрипт-а, Цхарт.јс је једна таква библиотека коју бисте требали испробати.

Како можете да почнете да креирате визуелизације података помоћу Цхарт.јс? Научићете како у овом чланку.

Хајде да почнемо.

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

Цхарт.јс је ЈаваСцрипт библиотека за визуелизацију података отвореног кода која се користи за цртање графикона који се могу приказати у ХТМЛ-у. Тренутно подржава осам различитих типова интерактивних графикона које такође можете да анимирате. Да бисте направили графикон заснован на ХТМЛ-у са цхарт.јс, потребно вам је ХТМЛ платно да га држите.

Библиотека прихвата скуп скупова података и других параметара прилагођавања као што су боја позадине, боја ивице и још много тога. Један од скупова података је етикета, који представља вредности на Кс оси. Други је скуп нумеричких вредности, које обично леже на И-оси.

Такође морате да наведете тип графикона у оквиру објекта графикона тако да библиотека зна који графикон да исцрта.

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

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

Повезан:Како да своју веб локацију учините прилагодљивом и интерактивном помоћу ЦСС-а и ЈаваСцрипт-а

Да бисте почели да користите цхарт.јс, креирајте потребне датотеке. За овај водич, називи датотека су графикон.хтмл, плот.јс, и индек.цсс. Можете користити било коју конвенцију именовања за своје датотеке.

Сада, налепите следеће у глава одељак ваше ХТМЛ датотеке за повезивање са Цхарт.јс мрежом за испоруку садржаја (ЦДН).

Ин графикон.хтмл:

срц=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Затим направите ХТМЛ платно да држите графикон и дајте му ИД. Такође, повежите се са ЦСС (индек.цсс) датотеком у глава одељак и покажите на вашу ЈаваСцрипт (плот.јс) датотеку у тело одељак.

Структура ХТМЛ датотеке изгледа овако:

 Цхартс

И у вашем ЦСС:

тело{
 бацкгроунд-цолор:#383735;
}
х1{
 боја:#е9ф0е9;
 маргин-лефт: 43%;
}
#плотс{
 маргина: ауто;
 бацкгроунд-цолор: #2е2д2д;
}

ЦСС стил изнад није скуп конвенција. Тако да можете да стилизујете свој како желите у зависности од ваше ДОМ структуре. Када су ваше ХТМЛ и ЦСС датотеке спремне, време је да исцртате своје графиконе помоћу ЈаваСцрипт-а.

Линијски графикон

Да бисте направили линијски графикон са цхарт.јс, ви ћете поставити графикон тип до линија. Ово говори библиотеци да нацрта линијски графикон.

Да бисте то демонстрирали, у вашој ЈаваСцрипт датотеци:

// Узмите ХТМЛ платно по његовом ИД-у
плотс = доцумент.гетЕлементБиИд("плотс");
// Пример скупова података за Кс и И-осе
вар монтхс = ["Јан", "Феб", "Мар", "Апр", "Маи", "Јун", "Јул"]; //Остаје на Кс-оси
вар саобраћај = [65, 59, 80, 81, 56, 55, 60] //Остаје на И-оси
// Креирајте инстанцу објекта Цхарт:
нови графикон (плоче, {
 откуцајте: 'линија', //Декларишемо тип графикона
 подаци: {
 ознаке: месеци, // Подаци о Кс-оси
 скупови података: [{
 подаци: саобраћај, // Подаци на И оси
 боја позадине: '#5е440ф',
 Боја ивице: 'бела',
 испуни: лажно, //Попуњава криву испод линије бојом позадине. Подразумевано је тачно
 }]
 },
});

Излаз:

Слободно промените испунити вредност за истина, користите више података, или подесите боје да видите шта се дешава.

Као што такође можете да видите, на врху графикона је мала кутија легенде. То можете уклонити унутар опционог Опције параметар.

Тхе Опције параметар такође помаже код других прилагођавања осим уклањања или укључивања легенде. На пример, можете га користити да натерате осу да почне од нуле.

Да прогласи ан Опције параметар, ево како одељак графикона изгледа у вашој ЈаваСцрипт датотеци:

// Креирајте инстанцу Цхарт објекта:
нови графикон (плоче, {
 откуцајте: 'линија', //Декларишемо тип графикона
 подаци: {
 ознаке: месеци, // Подаци о Кс-оси
 скупови података: [{
 подаци: саобраћај, // Подаци на И оси
 боја позадине: '#5е440ф', //Боја тачака
 Боја ивице: 'бела', //Боја линије
 испуни: лажно, //Попуњава криву испод линије бојом позадине. Подразумевано је тачно
 }]
 },
 //Наведите прилагођене опције:
 Опције:{
 легенда: {дисплаи: фалсе}, //Уклоните оквир легенде тако што ћете га поставити на нетачно. Подразумевано је тачно.
//Одредите подешавања за ваге. Да би оса И почела од нуле, на пример:
 ваге:{
 иАкес: [{тицкс: {мин: 0}}] //Можете поновити исто за Кс-осу ако садржи целе бројеве.
 }
 } 
});

Излаз:

Такође можете користити различите боје позадине за сваку тачку. Међутим, варирање боја позадине на овај начин обично је корисније са тракастим графиконима.

Прављење тракастих графикона помоћу Цхарт.јс

Овде треба само да промените графикон тип до бар. Не морате да постављате испунити опција јер траке аутоматски наслеђују боју позадине:

// Креирајте инстанцу објекта Цхарт:
нови графикон (плоче, {
 откуцајте: 'бар', //Декларишемо тип графикона
 подаци: {
 ознаке: месеци, // Подаци о Кс-оси
 скупови података: [{
 подаци: саобраћај, // Подаци на И оси
 боја позадине: '#3бф70ц', //Боја шипки
 }]
 },
 Опције:{
 легенда: {дисплаи: фалсе}, //Уклоните оквир легенде тако што ћете га поставити на нетачно. Подразумевано је тачно.
 }
});

Излаз:

Слободно натерајте И осу да почне од нуле или било које вредности као што сте урадили за линијски графикон.

Повезан:Методе ЈаваСцрипт низа које треба да савладате

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

// Креирајте инстанцу објекта Цхарт:
нови графикон (плоче, {
 откуцајте: 'бар', //Декларишемо тип графикона
 подаци: {
 ознаке: месеци, // Подаци о Кс-оси
 скупови података: [{
 подаци: саобраћај, // Подаци на И оси
//Боја сваке траке:
 боја позадине: [
 "ргба (196, 190, 183)",
 "ргба (21, 227, 235)",
 "ргба (7, 150, 245)",
 "ргба (240, 5, 252)",
 "ргба (252, 5, 79)",
 "ргб (0,12,255)",
 "ргб (17, 252, 5)"],
 }]
 },
 Опције:{
 легенда: {дисплаи: фалсе}, //Уклоните оквир легенде тако што ћете га поставити на нетачно. Подразумевано је тачно.
 }
});

Излаз:

Прављење тортног графикона са Цхарт.јс

Да бисте нацртали кружни графикон, промените тип графикона у пита. Можда бисте такође желели да подесите приказ легенде на истина да видите шта сваки сегмент пите представља:

// Креирајте инстанцу Цхарт објекта:
нови графикон (плоче, {
 типе: 'пие', //Декларишемо тип графикона
 подаци: {
 ознаке: месеци, //Дефинише сваки сегмент
 скупови података: [{
 подаци: саобраћај, //Одређује величину сегмента
 //Боја сваког сегмента
 боја позадине: [
 "ргба (196, 190, 183)",
 "ргба (21, 227, 235)",
 "ргба (7, 150, 245)",
 "ргба (240, 5, 252)",
 "ргба (252, 5, 79)",
 "ргб (0,12,255)",
 "ргб (17, 252, 5)"],
 }]
 },
 Опције:{
 легенда: {дисплаи: труе}, //Ово је подразумевано тачно.
}
});

Излаз:

Као што сте урадили у горњим примерима, можете испробати друге графиконе променом тип.

Ипак, ево листе подржаних цхарт.јс типове графикона које можете испробати користећи горе наведене конвенције кодирања:

• бар
• линија
• разбацати се
• крофна
• пита
• радар
• поларАреа
• мехур

Играјте се са Цхарт.јс

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

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

6 ЈаваСцрипт оквира које вреди научити

Постоји много ЈаваСцрипт оквира који помажу у развоју. Ево неких које би требало да знате.

Реад Нект

О аутору