Автор Лин Дао Ант Технологическая группа по работе с финансовыми данными
G2PlotЭто готовая, простая в настройке библиотека статистических диаграмм общего назначения, созданная командой AntV с хорошим визуальным и интерактивным интерфейсом.Эта статья знакомит с различными историями создания гистограмм в G2Plot.
задний план
Столбчатая диаграмма. Одна из наиболее часто используемых диаграмм представляет собой статистическую диаграмму, в которой используются прямоугольные столбцы для сравнения числовых значений по категориям. Для самой простой гистограммы требуется категориальная переменная и числовая переменная. На гистограмме каждый объект категориальной переменной представлен в виде прямоугольника (обычно называемого «столбцом»), а числовое значение определяет высоту столбца. .
Как одна из наиболее часто используемых диаграмм, гистограммы также имеют различные формы диаграмм, в том числе гистограммы с кластерами, образованные путем кластеризации нескольких параллельных категорий для формирования группы и разделения категорий на несколько подкатегорий. графики и т.д.
Гистограмма, представленная на рисунке ниже, показывает сравнение продаж товаров в различных категориях:
С точки зрения бизнеса, мы раньше использовали библиотеку диаграмм с открытым исходным кодом сообщества, но в процессе фактического использования, в различных бизнес-данных и сценариях, мы увидим различные детали и столкнемся с проблемами, некоторые из которых возникают в процессе использования конкурирующих При возникновении проблем с опытом мы решаем их шаг за шагом, некоторые из них являются отзывами пользователей в процессе использования. Поэтому наша команда AntV разработала решение библиотеки графов G2Plot на основе грамматики графов G2, которое решает различные проблемы опыта, с которыми мы столкнулись при использовании библиотеки графов с открытым исходным кодом сообщества, и в то же время расширяет возможности базовых статистических графиков для создания исходных данных. готовая, простая в настройке, универсальная библиотека статистических диаграмм с хорошим визуальным и интерактивным интерфейсом.
Ниже мы сначала опишем, как мы думали и решили некоторые из этих проблем с опытом, затем опишем усовершенствования, которые мы добавили к серии графиков гистограммы, и, наконец, объясним наше понимание конфигурации гистограммы по умолчанию.
опыт резьбы
Проблема перекрытия метки оси
💡 Используйте стратегию автоматического поворота, чтобы избежать перекрытия метки оси
В гистограмме больше категориальных переменных, и в гистограмме больше столбцов, а метки осей горизонтальной оси на графике могут перекрываться и перекрываться, как показано на следующем рисунке:
Видно, что на приведенном выше рисунке графической области недостаточно для четкого отображения всех меток осей по горизонтали и по горизонтали, в это время следует попробовать повернуть метки осей, как показано на следующем рисунке:
Если графическая область меньше, или есть больше столбцов, то можно наклониться даже на 45 градусов, этикетки оси также возникают, тогда вам нужно будет течь 90 становится наклоненным боковым:
Открытый в осевой конфигурации G2PLOT
autoRotateLabel, вы можете включить стратегию автоматического поворота метки оси, чтобы избежать описанной выше проблемы.
💡 Используйте стратегию пропуска метки, чтобы избежать перекрытия метки оси
Конечно, во время использования пользователь по-прежнему может выбрать схему наклона указанных меток осей, то есть указать, будут ли метки осей отображаться горизонтально, вертикально или под углом 45 градусов. когда метки осей перекрываются, применяется выборка.Метод исключения, правило выборки может быть выбрано в обычном режиме в горизонтальном, косом и вертикальном отображении.Некоторые метки осей пропускаются и отображаются.Например, когда выбрана метка по горизонтали, выборка опущена, как показано на следующем рисунке:
Когда этикетка выбрана наклоненной на 45 градусов, пропуск выборки отображается следующим образом:
Аналогично, в G2Plot включите
autoHideLabelчтобы включить стратегию пропуска выборки меток оси.
Кроме того, если ось X представляет собой дату или непрерывные данные, вполне разумно опустить метку, но когда ось X представляет собой категориальные данные, нецелесообразно опускать метку, например: мы не можем сделать вывод об опущенной метке. между книжной полкой и значением прибора, что нарушает принципы проектирования AntV (подробности см. ниже)эффективныйПринцип --- Диаграммы должны эффективно отображать информацию о данных. Однако если отображаются все метки оси X, возникнет проблема перекрытия, что повлияет на удобочитаемость.эффективныйОтображать информацию о данных, но также влиять на данные диаграммыЧистопредставление и схемаПрекрасный. Меньшее из двух зол, мы, наконец, выбрали стратегию пропуска меток, чтобы избежать перекрытия меток оси.
Метки осей скрыты областью рисунка
В процессе использования диаграммы формы в библиотеке диаграмм сообщества, когда пользователь решит настроить максимальное и минимальное значения оси Y для ограничения диапазона графика, возникнут проблемы с меткой оси и окклюзия области графика.Пользователь на рисунке ниже устанавливает максимальное значение 20 Десять тысяч, минимальное -10 тысяч:
Как видите, отмеченное на картинке место нарушает принцип построения графика.эффективныйОтображение информации о данных и графиковПрекрасныйправила. Мы оптимизировали эту проблему в G2Plot, обрезав графики, выходящие за диапазон минимального и максимального значений.Обратите особое внимание на одну деталь.Если минимальное и максимальное значения пересекают значение 0, обязательно отображайте галочку 0, как показано на следующем рисунке:
Положение и стиль метки данных
Метка данных: это маркировка содержимого текущего набора данных.
Как сделать соответствующие отношения между метками данных и столбцами более интуитивно понятными для пользователей? Должен соблюдаться принцип близости, чем ближе метка данных к столбцу, тем более интуитивно понятна соответствующая связь, поэтому:
- Когда ширина столбца больше длины метки номера, метка номера помещается внутрь столбца.
- Когда номер столбца меньше ширины длины метки, метка в верхней части номера столбца
- Номерные этикетки для сложенных столбцов и сложенных гистограмм могут быть размещены только внутри столбца
Новая проблема, вызванная метками данных внутри столбцов
Когда метка данных помещается внутрь столбца, если цвет столбца отличается, если вы продолжаете использовать черный текст метки данных, вы обнаружите, что различие между меткой данных и цветом столбца не очевидно. время, мы сделали следующую стратегию
- Цвет метки данных динамически настраивается по мере изменения цвета столбца.
- Проблемы с переполнением числовых меток
В столбчатой диаграмме с накоплением из-за характеристик наложения метки данных равномерно отображаются внутри столбца.Когда ширина числовой метки меньше ширины столбца, цвет метки данных можно настроить динамически; если метка данных превышает ширину столбца, то выходящая за пределы часть выделяется белым фоном, а обводка текста нуждается в обработке:
Выборка меток данных
Как и метки осей, метки данных также будут иметь проблемы с перекрытием и окклюзией между метками данных, когда данные плотные, как показано в следующих примерах различных гистограмм до оптимизации:
Видно, что все метки данных просто отображаются здесь прямо. Многие метки заблокированы и пользователи вообще не могут их прочитать. Отображаемые метки вообще не работают. метки данных опущены.Это также наше внимание:
- Для базовой столбчатой диаграммы можно установить флажок, чтобы скрыть перекрывающиеся метки данных и сначала отобразить первую метку данных. Эффект будет следующим:
- Для кластеризованной гистограммы учитывайте принцип приоритета метки данных справа в каждой кластерной группе для скрытия и отображения:
- Для столбчатых диаграмм с накоплением обработка проще, и отображение просто не выполняется, если высота столбца недостаточна для отображения меток данных.
Улучшение опыта
Выше мы выбрали проблемы использования меток осей и меток данных и описали, как мы улучшали и решали их шаг за шагом. Кроме того, мы также поддерживаем некоторые новые функции для некоторых сценариев использования гистограммы.
Улучшение 1: Интерактивная схема улучшения под массивными колоннами
Сначала взгляните на гистограмму, показанную на рисунке ниже. На первый взгляд она может показаться не гистограммой. На самом деле это гистограмма с большим количеством категориальных переменных на горизонтальной оси. Категориальные переменные — это китайские города:
В этом сценарии пользователям сложно отличить продажи конкретного города, не говоря уже о том, чтобы сравнить их, как поступить в этой ситуации?
- Взаимодействие сокращенной оси: используя компонент сокращенной оси, пользователи могут сосредоточиться только на сцене определенного интервала данных.
Обычно библиотека диаграмм обеспечивает сокращенное взаимодействие с осями, которое также предоставляется в G2Plot.По сравнению с другими библиотеками диаграмм сообщества, G2Plot имеет удобный интерфейс:
- Сокращенная ось может быть сопоставлена с различными статистическими диаграммами, такими как линейные диаграммы и гистограммы.
- Левый и правый текст сокращенной оси автоматически регулируют положение текста в соответствии с положением
- Прокрутка взаимодействия: более естественное взаимодействие
Кроме того, мы также предоставляем взаимодействие с полосой прокрутки, пользователи могут использовать прокрутку для просмотра части данных за раз, включая поддержку вертикальной прокрутки для гистограмм.
- Горизонтальная прокрутка гистограмм
- Вертикальная прокрутка гистограмм
Улучшение 2: региональная привязка обеспечивает более интуитивно понятный эффект контраста.
В приведенном выше фоне мы упомянули, что основная функция гистограммы заключается в сравнении значений различных категорий.Чтобы пользователям было удобнее сравнивать ветки интуитивно, мы также предоставляем компонент региональной связи, как показано на На рисунке ниже пользователи могут визуально сравнивать и просматривать компоненты региональной связи.
Лучшая конфигурация по умолчанию
Чтобы предоставить пользователям наилучшие возможности работы с диаграммами, мы используем наилучшую конфигурацию по умолчанию в серии столбчатых диаграмм в соответствии с принципами проектирования.
Случай 1: Положение легенды по умолчанию
Легенда представляет собой краткое изложение самого графика. Обычно зрительная линия движения людей идет сверху вниз, слева направо. Размещение легенды в верхнем левом углу по умолчанию для общей схемы выглядит нормально. Но лучшая практика такова:Сократите инстинктивный путь пользователей, рассматривающих графику против легенды, и повысьте эффективность сбора информации.
Цвета столбцов левой кластерной диаграммы отсортированы слева направо, легенда также отсортирована слева направо Цвет столбца правой столбчатой диаграммы с накоплением отсортирован сверху вниз, легенда также отсортирована сверху Отображение «один к одному» делает сбор информации более эффективным высокая.
Хотя положение легенды технически поддерживает 12 позиций, мы суммируем различные положения легенды в разных типах диаграмм и после ограничения объединяемся в две категории.
Дизайнеры и зрители даже не воспринимают смену позиции, но непреднамеренно повышается оперативность получения соответствующей графике информации.
**
Случай 2: правила отображения по умолчанию для меток данных
Выше мы упоминали, что провели большую оптимизацию и настройку меток данных гистограммы.Какой должна быть конфигурация по умолчанию для меток данных различных конкретных графиков на гистограмме? В стандартной конфигурации меток данных G2Plot мы в основном учитываем, может ли текст метки данных отображаться полностью в столбце.Первое, что нужно определить, это то, что текст метки данных записывается и читается слева направо.В столбце , к этому нужно относиться по-другому Вот простая стратегия:
- В вертикальных столбцах, таких как гистограммы, в большинстве случаев текст метки данных может отображаться не полностью из-за ширины столбца, поэтому метки данных не отображаются по умолчанию в гистограмме.
- В горизонтальных столбцах, таких как гистограммы, метки данных отображаются по умолчанию, поскольку столбцы горизонтальны, а направление текста совпадает с направлением столбца.
**
Принципы проектирования AntV
Подводя итог, принцип, которому мы следуем для оптимизации использования гистограммы, — это принцип проектирования визуализации данных AntV. Принципы проектирования AntV основаны наAnt DesignРуководящий принцип, полученный из системы проектирования с функциями визуализации данных. Хотя он следует дизайнерским ценностям Ant Design, он дополнительно интерпретирует область визуализации данных, например рекомендации по цветам и шрифтам.
После большой проектной практики и опыта мы обобщили следующие четыре основных принципа и отсортировали их в порядке важности. Четыре принципа дополняют друг друга и представляют собой прогрессивные отношения. Я надеюсь, что вы также сможете использовать их при разработке:
- точный: не искажать, не вводить в заблуждение и не упускать при преобразовании данных в визуальные выражения и точно отражать информацию, содержащуюся в данных.
- эффективный: Сосредоточьтесь на передаче информации, сдержанности без избыточности, избегайте информационной перегрузки и выражайте наиболее полезную информацию для пользователей с наиболее подходящим соотношением количества данных и чернил (Data-ink Ratio).
- Чисто: Презентация четкая, легко читаемая и организованная, что может помочь пользователям быстро достичь своих целей и получить больше информации за минимальное время.
- Прекрасный: Идеальное отображение данных, рациональное использование визуальных элементов для художественного творчества без чрезмерных модификаций, дающее пользователям элегантный опыт.
G2Plot: g2plot.antv.vision
исходный адрес гитхаба:GitHub.com/proto team/no…