Гантельная диаграмма — визуализация отслеживания производительности

В этом руководстве показано, как создать диаграмму гантелей с помощью инструмента Charticulator . Это диаграмма, состоящая из кружков и линий, которые используются для отслеживания и сравнения двух точек данных. Вы узнаете и поймете, как он предоставляет ценные данные и информацию в отчете LuckyTemplates.

Это пример диаграммы с гантелями, которую вы собираетесь воссоздать. Он показывает среднее количество дней, которые каждый сотрудник или технический специалист тратит на решение проблем за период с 2018 по 2020 год.

Оглавление

• Импорт набора данных в Charticulator
• Создайте и спроектируйте диаграмму гантелей
  • Добавьте цвета к символам внутри диаграммы гантелей
• Экспорт файла диаграммы гантелей в LuckyTemplates
• Показать среднее количество дней для решения значений
• Создайте слайсер для контекстных переходов
• Заключение

Импорт набора данных в Charticulator

Сначала создайте набор данных для экспорта в Charticulator. В этом примере набор данных содержит три данных: Assignee , Year и Avg Days To Resolve .

Затем щелкните многоточие под таблицей и выберите «Экспорт данных».

После этого перейдите на сайт charticulator.com и нажмите Launch Charticulator .

Найдите и откройте экспортированный набор данных и нажмите «Готово» . Затем вы будете перенаправлены внутрь инструмента Charticulator.

Создайте и спроектируйте диаграмму гантелей

Поместите Назначенного на ось Y холста. Вы можете изменить цвет и размер меток и делений в атрибутах PlotSegment1.

Затем проведите круг от Symbols внутрь Glyph.

Поместите Avg Days To Resolve по оси X холста.

Перенесите метки по оси X в верхнюю часть диаграммы. Откройте атрибуты PlotSegment1 и выберите Opposite для положения меток. Вы также можете изменить стиль цвета меток, чтобы он соответствовал оси Y.

Теперь создайте ссылки на круги на диаграмме. Нажмите «Ссылки» и выберите «Уполномоченный» , чтобы соединить их линиями.

Теперь визуализация будет выглядеть так.

Вы можете отформатировать и настроить объекты внутри диаграммы, чтобы она выглядела привлекательно. Вы можете изменить размер круга, ширину ссылки и другие атрибуты в зависимости от ваших предпочтений.

На диаграмме вы заметите, что некоторые круги слева опираются на ось Y. Настройте их в разделе «Диапазон» атрибутов PlogSegment1, чтобы создать пространство между ними и осью.

Добавьте цвета к символам внутри диаграммы гантелей

Добавьте цвета в круг, поместив Year в секцию Fill атрибутов Symbol1. Вы также можете определить цвета каждого года в атрибутах.

Если вы хотите показать среднюю линию на графике, вы можете создать линию и разместить ее там, где находится средняя. В этом примере средняя линия находится на уровне 30.

Вот как теперь будет выглядеть диаграмма гантелей.

Экспорт файла диаграммы гантелей в LuckyTemplates

Сохраните файл диаграммы и экспортируйте его в пользовательский визуальный элемент LuckyTemplates .

В настройках «Оси и масштабы» снимите флажок с параметров автоматической оси, чтобы избежать автоматического изменения осей при вызове контекстного перехода. После этого добавьте визуальное имя и экспортируйте файл диаграммы.

Теперь откройте LuckyTemplates и импортируйте файл диаграммы гантелей . Щелкните многоточие под Визуализациями и выберите Импорт визуального элемента из файла .

Далее нажмите на ссылку Charticulator с визуальным названием графика и заполните раздел Fields соответствующими данными.

Нажмите кнопку раскрывающегося списка «Год» и выберите «Не суммировать» .

Затем вы можете увидеть диаграмму гантелей на панели инструментов. Затем настройте атрибуты и поля каждого объекта в соответствии с вашими предпочтениями и стилем.

Вот так выглядит скорректированная диаграмма примера визуализации.

Показать среднее количество дней для решения значений

Еще одна вещь, которую вы можете сделать, это показать среднее количество дней для решения проблем рядом с каждым уполномоченным. Для этого вам нужно снова открыть Charticulator и использовать тот же набор данных.

Затем нарисуйте линию по оси Y холста, а затем поместите круг внутри глифа. Убедитесь, что вы рисуете линию сверху вниз, чтобы установить порядок по убыванию.

Поместите Назначенного на ось Y холста. Вот так выглядит результат.

Поместите текст внутри глифа и выровняйте его с исполнителями. Затем поместите Avg Days To Resolve внутри текста, чтобы отобразить значения.

Скройте метки на оси Y, сняв флажок «Видимый» внутри атрибутов.

Затем скройте круг, щелкнув кнопку с изображением глаза Symbol1.

Сохраните файл и экспортируйте его в пользовательский визуальный элемент LuckyTemplates . Не забудьте снять галочку с опций автоматической оси в настройках осей и масштабов . Импортируйте визуальный элемент так же, как была импортирована гантельная диаграмма, и введите соответствующие данные в разделе «Поля».

Поместите изображение рядом с диаграммой гантелей и выровняйте его с исполнителями.

Создайте слайсер для контекстных переходов

Создайте слайсер, чтобы фильтровать контекстные переходы. В этом примере тип задачи используется в слайсере.

Затем создайте взаимодействия в диаграммах. Перейдите на вкладку «Формат» и выберите «Редактировать взаимодействия» . Затем щелкните каждую визуализацию и значок взаимодействия с диаграммами.

После этого вы можете увидеть изменение диаграммы гантелей при выборе слайсера.

Если вы поместите Уполномоченный , Год и Среднее количество дней для решения в разделе «Подсказки», вы сможете видеть данные всякий раз, когда наводите курсор на круги гантели.

Дизайн панели мониторинга LuckyTemplates:
панель визуальных эффектов и эффектов в LuckyTemplates: рекомендации по проектированию

Заключение

Мониторинг рабочей деятельности упрощается с помощью диаграмм гантелей. Они предоставляют информацию с использованием точек данных и линий, которые помогут вам проверять и контролировать эффективность категории. Это отличные визуальные элементы, которые предоставляют полезную информацию для вашего отчета LuckyTemplates.

Изучите и узнайте больше о диаграммах гантелей и Charticulator, практикуя и максимизируя этот учебник.

Мудассир