Графики в сценарии, связанном с предприятием / бизнесом, представляют собой повседневную работу.
SAPUI5 уже предлагает инструменты для работы с диаграммами (см. VizFrame). Но на данный момент они ограничены и немного устарели по сравнению с остальными веб-фреймворками / библиотеками.
Вот почему я подумал, что было бы неплохо (и сложно) обернуть ChartJS и перенести его на OpenUI5.
openui5-chartjs
Openui5-chartjs - это настраиваемая библиотека OpenUI5, которая обертывает Chart.js.
Почему я выбрал ChartJS?
- Открытый исходный код: это проект, поддерживаемый сообществом.
- 8 типов диаграмм: визуализируйте данные 8 различными способами; каждый из них анимированный и настраиваемый
- HTML5 Canvas: отличная производительность отрисовки во всех современных браузерах (IE9 +)
- Отзывчивый: перерисовывает диаграммы при изменении размера окна для идеальной детализации масштаба
- Огромная и подробная документация
Поддерживаемые типы чата
ChartJS поддерживает 8 типов диаграмм:
- Линия
- Бар
- Радар
- Пончик и пирог
- Полярная зона
- Пузырь
- Разброс
- Площадь
NB: в текущем состоянии библиотеки мы поддерживаем только первые 6 типов диаграмм. Полное описание будет в следующих нескольких выпусках.
Демо
Здесь вы можете найти полную демонстрацию всех типов диаграмм.
ДЕЛАТЬ
- Обновление до ChartJS 2.7.17
- Обновите документацию до ChartJS 2.7.1
- Покрытие всех типов диаграмм
- Рефакторинг кода и добавление дополнительных опций
Как добавить openui5-chartjs в свой проект
Шаг 1: добавьте библиотеку в свой проект
Импортируйте library-preload.js в свой проект, где хотите. В моем примере я импортировал его в ROOT / thirdparty / it / designfuture / chartjs /.
Шаг 2: добавьте его в свой manifest.json
Добавьте библиотеку как зависимость от вашего проекта (это скажет фреймворку загрузить ее в начале и где она может найти библиотеку внутри ваших ресурсов)
Шаг 3: добавьте его в свои XML-представления
Добавьте пространство имен
xmlns: lab = "it.designfuture.chartjs"
Добавьте элемент управления Chart, который вы хотите отобразить, и настройте его
