FastReport Business Graphics .NET

Библиотека FastReport Business Graphics содержит набор классов, которые разработчики могут использовать в своих приложениях для наглядной визуализации данных и построения бизнес-диаграмм. В этой статье мы рассмотрим один из этих классов - диаграмму Bubble. Имеет смысл начать обзор диаграммы Bubble со сравнения с другими подобными диаграммами, входящими в состав библиотеки FastReport Business Graphics. Основная цель всех этих диаграмм - показать наглядно величины, уровни вложенности иерархии и позволить пользователю интерактивно манипулировать видом представляемых данных для достижения нужного варианта отображения. Такие диаграммы являются инструментами интерпретации данных парадигмы Business Intelligence. В результате использования этих инструментов может быть принято какое-либо бизнес-решение или сформированы выводы для последующего анализа. В первую очередь, попробуем оценить мгновенное восприятие формы и размеров величин при визуализации диаграммами из набора библиотеки. Ниже представлен один и тот же набор данных с количеством запусков космических аппаратов и его представление различными диаграммами. Просто посмотрите на каждую диаграмму и оцените свои ощущения - комфортность восприятия и возможность сравнить величины. TreeMap   Icicle   Sunburst   Bubble Величины интерпретируются в виде площади визуализируемого объекта. Человеку проще оценивать объекты круглой формы. Например, в первой диаграмме TreeMap сравнение площадей прямоугольников "The United States" и "China" сильно затрудняется разными размерами по высоте и ширине. В диаграмме Icicle эти величины очень похожи между собой также, как и в диаграмме Sunburst. В диаграмме Bubble эти величины заметно отличаются и сразу становится понятно, что оранжевый круг немного больше. Человек обладает бинокулярным зрением, которое помогает ему оценить размеры и расстояния до объектов. Это все хорошо работает в окружающем нас трехмерном мире, но при использовании проекций на монитор или лист бумаги бинокулярное зрение может сыграть с нами злую шутку. Мы начинаем использовать такие понятия как "глазомер" и полагаться на свои ощущения. Размеры объектов оцениваются наиболее точно именно в той области, куда нацелен взгляд. Любые другие объекты, воспринимаемые периферийным зрением, не поддаются точной оценке их размеров. Также важен зрительный угол - смещение взгляда относительно направления головы. Расстояние до глаз будет разным и это будет влиять на правильную оценку размеров. Цветовая палитра и контрастность также играют большую роль в правильном восприятии размеров. Учитывая все эти нюансы, становится понятно, что диаграммы должны формироваться относительно некого центра, на который будет нацелен взгляд человека. Наиболее важные величины (они же наибольшие по размеру) должны располагаться в центре диаграммы. Эти объекты будут в первую очередь оценены оператором. Все эти правила используются при визуализации данных диаграммой Bubble. Возможности диаграммы Bubble не ограничиваются сравнением простого списка величин. Также, как и другие диаграммы из набора FastReport Business Graphics, эта диаграмма может визуализировать иерархические данные в виде веерообразных срезов величин на одном уровне иерархии. Диаграмма Bubble является интерактивной. При наведении курсора на тот или иной круг, появляется всплывающая подсказка с информацией об отображаемой величине. Кликом можно выделить нужный круг. Двойной клик выполняет операцию drill-down, где диаграмма отображает информацию о подчиненных объектах иерархии. Двойной клик по области текущей иерархии вернет отображение к предыдущему уровню. Подписи к объектам отображаются по центру круга при отсутствии подчиненных объектов или в верхней части круга. При невозможности отображения подписи из-за малых размеров свободного места в объекте, подпись не отображается, но подсказка при наведении курсора сохраняется. Значения очень малых величин по отношению к родительскому объекту не отображаются на диаграмме. Компоновка кругов на диаграмме формируется алгоритмом автоматически. Круги компонуются вокруг центра диаграммы по убыванию величины. В коде программы можно переопределить обработчики событий и выполнить дальнейшие действия. Также есть событие, которое поможет кастомизировать отображение элементов диаграммы. Кроме величин, которые интерпретируются в виде площади, есть возможность визуализации по абсолютному значению. Это может быть полезным для сравнения геометрических размеров объектов. Например, диаметров планет. Подробнее о диаграмме Bubble и об источниках данных можно прочесть в документации. Теперь предлагаю кратко рассмотреть алгоритм формирования диаграммы Bubble. Принцип упаковки кругов базируется на алгоритме Grokker. Для каждого уровня иерархии вложенных структур работает свой собственный экземпляр упаковщика. При визуализации круги масштабируются до нужного размера. Построение диаграммы начинается с добавления двух первых окружностей. Затем выполняется итерационное добавление окружностей во внешнюю замкнутую цепь объектов с учетом алгоритма избегания пересечений. Перебор цепи каждый раз начинается с наиболее близкой к центру диаграммы окружности. После добавления всех объектов будет сформирована последовательность объектов, расположенных вокруг исходного центра. В дальнейшем будут выполняться операции с полученным списком координат и размеров для визуализации диаграммы Bubble. При работе с диаграммой Bubble следует особое внимание уделить исходным данным. Количество значений на одном уровне иерархии не должно быть слишком большим. В противном случае восприятие построенной диаграммы может быть затруднено. Также следует применить предварительную группировку малых величин для их объединения в одно значение (например: "Другие"). При настройке свойства максимальной отображаемой глубины также стоит ограничиться одним или двумя уровнями для улучшения восприятия диаграммы. Перед заданием цветовых параметров и свойств диаграммы стоит вспомнить о цели, для которой диаграмма формируется. Цвет часто может упростить восприятие тех или иных значений. При выборе цветовой палитры обратите внимание на контрастность цветовых значений, не стоит сочетать в одной диаграмме очень насыщенные цвета и блеклые. Также стоит избегать слишком темных цветов при отображении (печати) диаграммы на светлом фоне. Это справедливо и для малоконтрастных цветов по отношению к цвету фона. Использование штриховок в заливках может затруднить восприятие размеров. Диаграмма Bubble показала себя с хорошей стороны как простой инструмент наглядной визуализации и может быть использована в приложениях в качестве одного из инструментов Business Intelligence наравне с другими компонентами из библиотеки FastReport Business Graphics. Пример использования диаграммы можно посмотреть в комплекте поставки продукта в папке \Demos\C#\MainDemo. Желаю всем много красивых и полезных диаграмм!

FastReport Business Graphics – это библиотека, содержащая несколько продвинутых способов визуализации данных. На сегодняшний день в ней содержатся диаграммы: Treemap, Sunburst, Icicle и диаграмма Гантта. Сегодня мы рассмотрим, как подключить FastReport Business Graphics .NET к FastReport .NET. Это позволит вам использовать диаграммы из FastReport Business Graphics в ваших отчётах. В первую очередь вам нужно установить FastReport Business Graphics и FastReport .NET на ваш компьютер. Установка этих продуктов описана в других наших статьях. В папке установки FastReport .NET находится папка Extras\Objects\FastReportBGObjects. В этой папке откройте проект FastReportBGObjects.csproj. Это – проект для сборки.dll, которая нам нужна. Откройте список ссылок проекта. Он будет выглядеть таким образом: Удалите FastReport, FastReport.BG и FastReport.Compat из этого списка. Так как наша цель – добавить FastReport Business Graphics в FastReport .NET, необходимо добавить в проект именно те .dll-файлы, которые будут использоваться во время работы. Взамен удалённых файлов добавьте FastReport.dll и FastReport.Compat.dll из установочной папки FastReport .NET, а также файл FastReport.BG.dll, находящийся в корневой папке установки FastReport Business Graphics. После того, как вы заменили ссылки на актуальные, соберите проект. Если сборка прошла успешно, значит вы готовы перейти к следующему шагу инструкции: подключение плагина в FastReport .NET. Собранный dll-файл плагина называется FastReportBGObjects.dll и находится в подпапке проекта: Extras\Objects\FastReportBGObjects\bin\Debug Вы можете переместить файл в другую папку, но при этом вам придётся делать это каждый раз, как вы собираете его повторно. Для демонстрации я перемещу его в папку C:\DLL. Рассмотрим два отдельных случая.1) Вы используете FastReport Designer. В этом случае вам нужно подключить dll-библиотеку в самом дизайнере и перезапустить его, или же указать её расположение в config-файле. Подключить плагин вы можете в меню Настройки – Плагины: Для добавления ссылки на плагин откройте config-файл с помощью любого текстового редактора и модифицируйте его таким образом: <?xml version="1.0" encoding="utf-8"?> <Config> ... <Plugins> <Plugin Name="c:\.....\FastReportBGObjects.dll"/> </Plugins> </Config> Выделенная жирным область – путь к плагину. 2) Вы используете FastReport в составе какого-то проекта. В этом случае добавьте FastReportBGObjects.dll в список ссылок вашего проекта и добавьте следующий код к коду проекта: RegisteredObjects.Add(typeof(SunburstObject), "ReportPage", 125); Этот код должен выполняться единожды. Внимание! Библиотеки FastReportBGObjects.dll и FastReportBG.dll должны дополнительно находиться рядом с приложением, которое их использует. Если вы используете FastReport Designer, скопируйте эти библиотеки в корневую папку приложения, а если используете FastReport Buriness Graphics в своём проекте - расположите их в той же папке, где располагается исполняемый файл. Итак, после всех этих шагов вы сможете пользоваться продвинутыми диаграммами FastReport Business Graphics внутри отчётов, сгенерированных с помощью FastReport .NET. Если у вас возникнут вопросы по сборке плагина FastReportBGObjects или по подключению его к FastReport .NET, обращайтесь в нашу поддержку.

С релизом FastReport Business Graphics появился такой интересный вид диаграмм, как диаграмма Гантта. Прежде всего, это популярный тип столбчатых диаграмм , который используется для иллюстрации плана, графика работ по какому-либо проекту. Диаграмма Гантта является одним из методов планирования проектов и применяется в приложениях по управлению проектами. Для начала запустим демо-проект. Вот так выглядит начальная страница при открытии демонстрации диаграммы Гантта. Сверху мы видим шапку диаграммы, в которой показан промежуток времени на разработку условного проекта. Слева представлен список задач, а в центре находятся промежутки задач, которые выполнялись. Пожалуй, немного её отредактируем. Чтобы перейти в режим изменения, нужно нажать правой кнопкой мыши на любую ноду и нажать Properties. У вас появится такое окно как на скриншоте. Под нодой понимается вот эта линия, которая обозначает действие в проекте. Начнем с палитры (Palette). В палитре идет работа со стилем самой диаграммы. Здесь можно изменять цветовую палитру и стили.  Color Palette отвечает за цвета ресурсов. Тут можно выбрать готовые шаблоны, либо кастомизировать по-своему. Чтобы настроить палитру под себя, для начала нужно выбрать цвет и нажать на Add. Также, вы могли заметить, что внизу есть пример того, как будет выглядеть диаграмма. Это удобно, т.к вам не нужно постоянно закрывать и открывать окно чтобы увидеть изменения. Теперь приступим к окну Styles. Тут мы можем изменить сами ноды. - Draw style отвечает за то, как будут выглядеть ноды при обычном режиме.- Record hovered отвечает за то, как будут выглядеть ноды при наведении.- Record selected пока в разработке. Давайте изменим Record Hovered. Чтобы открыть окно редактирования, просто нажмите два раза левой кнопкой мыши по названию и у вас откроется вот такое окно: Fill Style настраивает стиль ноды при наведении. Gradient style нужен для гибкой настройки отображения ноды при наведении (только для градиента). Hatch style нужен для гибкой настройки отображения ноды при наведении (только для штриховки). Как мы видим, тут довольно гибкая настройка стиля ноды. Доступно изменение цвета заливки, стиля для градиента, цвета текста и т.д. А ещё есть пример того, как сейчас выглядит нода при наведении. К примеру, мы изменим стиль на градиент, зададим два цвета, применим изменения, и вот теперь как выглядит нода при наведении. Теперь перейдем в окно Header. Тут мы можем менять его высоту, будет ли в диаграмме вертикальные и горизонтальные линии, шаблон данных, редактирование распределения задач и позиции шапки. Для начала, так выглядит окно: Header height отвечает за высоту шапки. Если выставить Default header height, то высота шапки будет равняться двум нодам. Scale показывает промежутки задач, в зависимости от того, какой вы выбрали (день, месяц, год). String pattern отвечает за формат данных, которые будут показываться на шапке. По умолчанию выставлено MMMM (в шапке будет показываться только месяц). Очень удобный формат настраивает сам C#. С ним будет наименьшее количество проблем или ошибок. Draw horizontal grid и Draw vertical grid отвечают за то, будут ли горизонтальные и вертикальные линии в диаграмме. Show top date in header отвечает за отображение даты в зависимости от того, что вы выставили в Scale. Bottom header view показывает, в каком месте будет месяц на шапке. Segmentation in header настраивается для отображения дней (от 1 до 31). Давайте изменим нашу шапку. Выставим такие свойства: Теперь, наша диаграмма выглядит так: У нас появилась более подробная сетка. Месяц поделен на 10 дней и задачи равномерно распределились. Приступим к вкладке Data, выглядит она так: Тут мы можем создать новый ресурс и задач, и так же пару фич. Давайте по порядку. В Date у нас хранятся задачи, которые можно удалять, добавлять новые, или сортировать. В Resources показаны ресурсы (зачастую это сотрудники). Для удобства им можно присваивать индекс. Text on interval нужен для отображения задач прямо на интервале. Text position отвечает за то, где будет находится текст в районе интервала. Maximum width of the block with the title of the record нужен для настройки длины списка задач (самый левый столбец). Нужно подметить, что если значение будет слишком маленьким, то свойство автоматически настроится под минимально допустимое. Сделано это для того, чтобы не было ошибок в отображении, если пользователь ошибся. Важно знать, что у каждого ресурса должен быть свой уникальный индекс. Иначе могут быть проблемы с работой в диаграмме. Ещё можно добавить название задачи прямо на интервале. Достаточно поставить галочку в Text on intervals и разместить позицию по середине. Давайте добавим новый ресурс и задачу. Чтобы добавить ресурс, изменить стартовую и конечную дату, нажмите два раза на задачу и у вас появится новое окно: Для добавления ресурса, снизу нужно написать его название и нажать на кнопку +. Мы уже создали задачу во вкладке Data, теперь создаем новый ресурс и жмем ok. Вот как теперь выглядит наша диаграмма: Как мы видим, в правом нижнем углу у нас появился новый промежуток, который в разработке месяц и имеет отдельный цвет (жёлтый), чтобы ничего не перепутать. А слева от нового промежутка добавится название задачи. Поздравляю, мы научились редактировать существующую диаграмму, давайте создадим свою! Нажмите на начальной странице на вкладку Custom data, вот что мы увидим при нажатии: Чтобы создать свою диаграмму, для начала, нужно создать .csv или .xml файл. Возьмем пример .csv файла, который находится по пути \Demos\Data\GanttSamples. Выглядит он так: У нас есть 4 столбца, Name, StartDate, EndDate и Index. Вписываем их сюда по порядку: И мы получаем диаграмму, которая будет выглядеть так: Не следует забывать, что у нас есть всего 4 столбца. Name member - содержит в себе название задач.Start Date member - указывает на начальную дату работы с задачей.End Date member - указывает на конечную дату задачи.Resource member - это название ресурсов. Важно следить за названием столбцов, которые вы будете заполнять при создании диаграммы и за порядком вноса данных, чтобы не возникли проблемы. Подведем итог. В этой статье была продемонстрирована подробная работа с диаграммой Гантта в FastReport BusinessGraphics. Мы научились менять цвет и стиль ноды. Поработали с шапкой диаграммы и разобрались, как нужно добавлять новые задачи, промежутки и ресурсы. Параллельно научились создавать свою диаграмму при помощи .csv файла. Желаем удачи в пользовании ;)