В прошлой жизни, когда я работал разработчиком, меня постоянно просили делать графики рок-звезд, чтобы показать данные моим боссам. Этот запрос всегда возникает, и что может быть лучше, чем хвастаться данными и впечатлять их, представляя их классной графикой, всплывающими подсказками, анимацией и цветами. Эта статья поможет вам создать расширенные HighCharts на платформе OutSystems с низким кодом.
В этой статье я предполагаю, что вы уже создали бесплатную личную среду, следуя этим простым инструкциям от моего замечательного коллеги Отавио, Статья на Medium от OutSystems, или используете купленную лицензию OutSystems. (Если нет, вы можете начать всего за несколько минут, подписавшись на нашу бесплатную версию — да, это навсегда бесплатно).
Если вы не знакомы с HighCharts, загляните на их демо-страницу с диаграммами здесь и вы будете поражены их лучшими линейными графиками всех типов! Знаете ли вы, что внутри всех диаграмм, поставляемых с Service Studio, используется HighCharts.js? Непосредственно в Service Studio вы можете добавить множество типов диаграмм, таких как области, гистограммы, столбцы, кольцевые, линейные и графические! Мы даже предлагаем виджет для добавления всплывающей подсказки.
Во-вторых, мы также предлагаем OutSystems Forge, в котором есть многоразовые компоненты, в которые можно довольно легко добавить больше диаграмм. Однако, если вы непреклонны в добавлении определенной диаграммы, которую вы нашли в онлайн-библиотеке JavaScript, вы должны знать, что это не так уж сложно сделать.
Этот третий вариант, изучение добавления библиотек JavaScript непосредственно в Service Studio, — это то, что мы будем делать в этой демонстрации.
Создание расширенного HighChart: пошаговая демонстрация Давайте начнем:
- Загрузите библиотеку HighCharts 10.2.1 здесь; просто нажмите фиолетовую кнопку внизу страницы.
- Откройте загруженную папку, разверните папку «примеры», затем откройте папку и дважды щелкните HTML-файл внутри, чтобы просмотреть его в браузере.
- Если график соответствует тому, что вы ищете, щелкните правой кнопкой мыши в браузере и выберите «Просмотреть исходный код страницы» или просмотрите HTML-код в VS Code или другом редакторе кода. В этом примере HighChart мы будем использовать папку «network-graph», как показано ниже.
Это может не выглядеть потрясающе на статичном изображении, но на самом деле это довольно интерактивно. Вы можете навести курсор на каждый пузырь, и он будет выделен, а другие исчезнут на заднем плане. Подсказки появляются с названием языка, когда вы изучаете всплывающую подсказку. Кроме того, когда он загружается, он создает крутую анимацию. У вас может возникнуть соблазн перезагрузить страницу, чтобы снова увидеть анимацию.
4. Прокрутите вниз CSS, и вы должны увидеть теги сценария, импортирующие файлы HighChart.js. Вернитесь к загруженной папке HighChart и найдите каждый из этих файлов. В Service Studio вы импортируете эти сценарии, щелкнув правой кнопкой мыши «Сценарии» на вкладке «Интерфейс», как показано ниже:
5. На экране, где вы хотите отобразить график, вам нужно будет добавить каждый необходимый скрипт, отображаемый в html-файле, чтобы все они загружались при загрузке экрана. Вы должны увидеть эту опцию для добавления, когда вы щелкнете один раз по экрану, а затем прокрутите вниз в свойствах, как показано ниже:
Далее давайте создадим контейнер, в котором будет отображаться диаграмма!
6. Все, что вам нужно сделать, это перетащить элемент-контейнер на экран. Затем в свойстве name назовите его «ChartContainer». Позже на него будет сделана ссылка в нашем javascript.
7. Вам также понадобится CSS, расположенный в верхней части html-файла и перед тегами скрипта HighChart. Внутри ChartContainer откройте редактор CSS, щелкнув внутри «Классы стилей», как показано ниже:
В редакторе CSS вставьте все CSS из файла index.html network-graph.
8. Вернитесь к свойствам экрана. Здесь вам нужно добавить клиентское действие OnRender. Это действие загрузит скрипт одновременно с загрузкой остальных визуальных элементов страницы. Если страница перезагрузится, функция OnRender запустится снова, в результате чего этот график будет обновлен последними данными, если он заполняет свои данные из API. Чтобы ознакомиться со всеми обработчиками жизненного цикла, ознакомьтесь с документацией здесь. OnRender будет иметь собственный javascript, который создает линейный график. Вам нужно будет перетащить виджет javascript в действие клиента OnRender, как показано в двух шагах ниже:
9. После завершения перейдите к html и найдите javascript. Он должен начинаться со строки 74, если вы выбрали «Просмотреть исходный код страницы» после открытия в браузере. Начните копировать со строки 74 по 277 и вставьте этот код в виджет javascript внутри Service Studio. Строка 47, начинающаяся с Highcharts.chart(‘container’, должна быть отредактирована, чтобы она работала.
10. Поскольку поле идентификатора или имени с точки зрения OutSystems Service Studio помечено как «ChartContainer», javascript должен будет сослаться на него в строке 47 редактора JS. Чтобы продемонстрировать, как мы можем передавать данные в сценарий JS мы собираемся передать этот ChartContainer в качестве параметра. Для этого просто щелкните правой кнопкой мыши параметры в редакторе JS и выберите «Входной параметр». Для типа поля имени «ContainerId» поле IsMandatory выберите «Да», а для типа данных выберите «Текст». В строке 47 ссылка параметр следующим образом: Highcharts.chart($parameters.ContainerId, {.' Ваш JS-редактор должен выглядеть так, как показано на рисунке ниже:
11. После нажатия кнопки «Готово» последней связью для отображения графика будет установка для входного параметраContainerId значения ChartContainer.Id в сценарии JS, как показано ниже:
12. После нажатия «Опубликовать в один клик» вы должны увидеть свой новый график сети!
Лучший способ интегрировать динамический код из API или агрегировать данные — расширить использование инструмента параметров, как мы сделали для идентификатора контейнера. Просто сохраните данные из API как переменную и укажите их в скрипте, добавив параметры.
Вот и все!
Поздравляем с созданием вашего первого сетевого графика HighCharts с использованием OutSystems. Остальные графики делаются точно так же. Не стесняйтесь поделиться со мной в Твиттере или через Сообщество OutSystems о том, что вы создали, о любых проблемах, которые возникли на этом пути, и о чем вы хотели бы узнать больше! Веселиться!
