Диаграмма Bubble
Описание
Диаграмма Bubble представляет собой способ визуализации данных иерархической структуры в виде кругов, площадь которых пропорциональна значению отображаемой записи. Внутри кругов родительских записей могут быть вложены круги дочерних записей. Расположение кругов формируется с помощью алгоритма упаковки основанного на алгоритме Grokker, модифицированном для лучшего отображения иерархических данных [^1]. Принцип работы диаграммы во многом схож с диаграммой TreeMap.
Подписи к объектам отображаются по центру круга, если нет дочерних элементов или их отображение отключено. Если в круге есть дочерние круги по иерархии, то они рисуются со смещением вниз, а текстовое описание располагается в свободном месте выше этих кругов. При невозможности отображения подписи из-за малых размеров свободного места в объекте, подпись не отображается. Всегда сохраняется возможность отображения подписи при наведении курсора мыши во всплывающей подсказке. Значения очень малых величин по отношению к родительскому объекту не отображаются на диаграмме.
Компоновка кругов на диаграмме формируется полностью автоматически и зависит от величин записей источника данных. Размер диаграммы зависит от размеров прямоугольной области объекта. Круги компонуются вокруг центра диаграммы.
Источником данных для диаграммы Bubble служит "иерархический источник данных".
Обратите внимание, что несмотря на то, что площади кругов иллюстрируют значения величин на одном уровне иерархии, площадь круга содержащего отображение вложенных значений не совпадает с суммой площадей этих значений - это всего лишь иллюстрация группировки для отображения вложенной иерархии.
Переключение на визуализацию одного из элементов иерархии возможно двойным кликом мыши по выбранному объекту. Возврат на предыдущий уровень иерархии возможен двойным кликом по кругу иллюстрирующему текущий уровень иерархии или с помощью объекта навигации "BreadCrumb".
Применение
Древовидная диаграмма подходит для сравнения нескольких иерархий одновременно, а также для наглядного сравнения величин находящихся на одном уровне иерархии.
При подготовке источника данных следует обратить особое внимание на то, что количество значений на одном уровне иерархии не должно быть слишком большим. В противном случае восприятие построенной диаграммы может быть затруднено. Также следует применить предварительную группировку малых величин для их объединения в одно значение (например: "Другие"). При настройке свойства максимальной отображаемой глубины MaxDepth стоит также ограничиться одним или двумя уровнями для улучшения восприятия диаграммы.
По умолчанию значения из источника данных интерпретируются в виде площади круга. Чем больше значение, тем больше площадь круга и наоборот. В некоторых случаях может быть полезным прямое соответствие значения из источника данных диаметру круга, например, при сравнении геометрических размеров объектов (например, размеров планет). Для включения этого режима визуализации нужно использовать свойство ValueViewType. По умолчанию это свойство содержит значение ValueViewType.Square, и его можно переключить в значение ValueViewType.Absoulute для отображения абсолютных значений из источника данных.
Внешний вид диаграммы можно настроить из кода программы или с помощью интегрированного редактора стилей.
Пример
Ниже приведен пример создания иерархического источника данных непосредственно в коде приложения и сохранения диаграммы Bubble в графический файл.
using (Bubble bubble = new Bubble())
{
bubble.Width = 1024;
bubble.Height = 1024;
using (HierarchicalRecordsSource source = new HierarchicalRecordsSource())
{
source.BeginInit();
HierarchicalRecord r = new HierarchicalRecord("Great Britain");
r.Children.Add(new HierarchicalRecord("Bitter", 3));
r.Children.Add(new HierarchicalRecord("Brown", 4));
r.Children.Add(new HierarchicalRecord("Scottish", 3));
source.Records.Add(r);
r = new HierarchicalRecord("Ireland");
r.Children.Add(new HierarchicalRecord("Irish Beer", 6));
source.Records.Add(r);
r = new HierarchicalRecord("North America");
r.Children.Add(new HierarchicalRecord("Standard", 16));
r.Children.Add(new HierarchicalRecord("Pale", 8));
r.Children.Add(new HierarchicalRecord("Amber", 6));
source.Records.Add(r);
r = new HierarchicalRecord("Belgium");
r.Children.Add(new HierarchicalRecord("Ale", 4));
r.Children.Add(new HierarchicalRecord("Strong", 7));
source.Records.Add(r);
r = new HierarchicalRecord("Czech Republic");
r.Children.Add(new HierarchicalRecord("Czech Lager", 8));
source.Records.Add(r);
r = new HierarchicalRecord("France");
r.Children.Add(new HierarchicalRecord("Ale", 6));
source.Records.Add(r);
r = new HierarchicalRecord("Germany");
r.Children.Add(new HierarchicalRecord("Wheat Beer", 12));
source.Records.Add(r);
r = new HierarchicalRecord("Europe");
r.Children.Add(new HierarchicalRecord("Malty", 3));
r.Children.Add(new HierarchicalRecord("Bitter", 6));
r.Children.Add(new HierarchicalRecord("Dark", 4));
source.Records.Add(r);
r = new HierarchicalRecord("Other");
r.Children.Add(new HierarchicalRecord("Lager", 13));
r.Children.Add(new HierarchicalRecord("Commonwealth", 19));
source.Records.Add(r);
source.EndInit();
bubble.DataSource = source;
bubble.Palette.PaletteType = PaletteType.EarthTones;
using (ImageExport export = new ImageExport())
{
export.ImageFormat = ImageExportFormat.Png;
export.Export(bubble);
}
}
}
Результат работы кода можно увидеть на следующей картинке:
