Какво е ngx-charts? 🤷🏻
Ngx-charts е декларативна рамка за диаграми за Angular2 и извън него.
Той е уникален, тъй като не просто обвива d3.js javascript библиотеката, вместо това използва Angular за изобразяване и анимиране на SVG елементите и взема математическите функции, скалите, генераторите на оси и форми и други страхотни неща от d3.
Връзка към официалното репо на Github: https://github.com/swimlane/ngx-charts
Как да започна? 👶🏻
Използване с Angular 2+ ✍🏻
Можем да кодираме твърдо нашата височина и ширина на изгледа, схема, yAxis, xAxis… в HTML файла, но по този начин можем просто да избутаме данните от JSON или да ги модифицираме както искаме и да ги покажем в графиката.
Демо 💻
Демото се хоства на https://angular-with-ngx-charts.appspot.com/
с кода, наличен на: https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts
Можете да клонирате репото, да стартирате приложението и да започнете да променяте диаграмите!
Документация 📖
Тяхната документация е доста подробна и към всяка диаграма има пример и списък на всички свойства, които могат да се използват.
Заключение 🕶
Това е много прост, но много мощен инструмент за работа с графики за вашето следващо Angular приложение!
Благодарим на момчетата от swimlaneза предоставянето на тези диаграми и превръщането им в отворен код!
Относно канелата🕴🏻
Този урок/статия е разработен за Cinnamon Agency от Roberto Kedmenec в Загреб, Хърватия, използвайки [email protected]. за примера.
