Как в 1с сделать диаграмму продуктов
Перейти к содержимому

Как в 1с сделать диаграмму продуктов

  • автор:

Диаграмма

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

Диаграмма

Платформа позволяет создавать диаграммы разных типов. Каждый из них удобен для представления тех или иных данных:

  • График: обычный, с накоплением, по шагам, с областями, с областями нормированный, с областями и накоплением;
  • Гистограмма вертикальная или горизонтальная: обычная, с накоплением, нормированная, объёмная, с накоплением объёмная, нормированная объёмная;
  • Круговая обычная и объемная;
  • Кольцевая обычная и объемная;
  • Биржевая обычная и «свеча»;
  • Изометрическая: обычная, непрерывная, лента, пирамида;
  • Водопад;
  • Поверхность: обычная, каркасная, выпуклая, вогнутая, затенённая;
  • Сотовая;
  • Радарный график: обычный, с областями, с накоплением, с областями и накоплением, с областями нормированный;
  • Измерительная;
  • Воронка: обычная, объёмная, нормированная, нормированная объёмная;
  • Точечная;
  • Пузырьковая.

В отчётах, использующих систему компоновки данных, диаграмма описывается визуальными средствами как один из элементов структуры отчёта:

Диаграмма

Линии тренда

В диаграммах поддерживаются линии тренда. У одной серии их может быть несколько. Вместе с линией тренда можно отображать её уравнение и коэффициент детерминации.

Диаграмма

Анимация

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

Всплывающие подсказки

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

Диаграмма Диаграмма Диаграмма

В подсказку можно установить форматированную строку и с её помощью вывести текст и добавить картинки.

Диаграмма

Подсказка может отображать одно значение точки или все значения точки во всех сериях.

Диаграмма

Существуют два режима отображения подсказок:

  • Чувствительный, когда подсказка отображается постоянно и для того значения, которое находится ближе всего к указателю.
  • При наведении, когда подсказка появляется только тогда, когда указатель мыши устанавливается над каким-нибудь значением.

Палитры цветов

Поддерживается использование большого количества предопределенных палитр для оформления диаграмм: Яркая, Мягкая, Пастельная, Теплая и Холодная и другие. Также поддерживается набор градиентных палитр и существует возможность автоматического создания собственной градиентной палитры на основе начального и конечного цветов.

Диаграмма

Информационные интервалы и информационные линии

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

Подсветка серий

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

Развитие диаграмм

Данная статья является анонсом новой функциональности.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.

Реализовано в версии 8.3.16.1030

Мы продолжаем развивать механизм диаграмм.

В версии 8.3.16 планируются следующие возможности:

  • Вывод дополнительной шкалы значений
  • Настройки отображения серии
  • Интерактивное редактирование значений диаграммы
  • Автоматическое сохранение цвета серии

Вывод дополнительной шкалы значений

secondAxis.png

Часто очень удобно графически отобразить величины в разных единицах изменения, например, вывести выручку и объем реализованной продукции. При попытке вывести такие данные в одну диаграмму сразу возникает проблема масштаба, одни величины могут быть в миллионах, другие в тысячах. Проводить какой-либо анализ по такой диаграмме невозможно.
Теперь вы сможете вывести дополнительную шкалы значений. Эта шкала будет иметь собственный масштаб, собственные настройки, что позволит по такой диаграмме провести анализ.
Пример:

Дополнительная шкала не обязательно должна иметь собственный масштаб. Можно вывести дополнительную шкалу для дублирования основной, чтобы пользователю было удобней считывать информацию.

Настройка отображения серии

Тип серии

При выводе разных показателей на одну диаграмму очень наглядно отображать их разными типами. Например, на предыдущем примере мы вывели показатель “Cумма оборот” как график, а “Количество оборот” как гистограмму. Вы также теперь сможете настроить тип отображения конкретной серии. Для выбора доступны следующие типы:

  • Гистограмма
  • Гистограмма объемная
  • График
  • График с областями
  • График по шагам

Пример отображения диаграммы, где у каждой серии установлен собственный тип отображения:

combined.png

Суммирование серий

Ранее, режим накопления настраивался при выборе типа диаграммы. Мы добавили возможность настраивать тип накопления для каждой серии отдельно и указывать какие серии должны накапливаться вместе, а какие раздельно.

Примеры использования данной функциональности:

  • Группировка по контрагенту и сравнение с прошлым годом В этом примере мы указываем что серия “Прошлый год” не должна суммироваться, а все остальные должны. Это позволяет сравнить общую сумму с прошлым годом и увидеть, кто и какую часть привнес в этом году.

stackGroup.png

планфакт.png

  • План и факт с группировкой по товару
    В этом примере мы указываем что серии “План…” накапливаются отдельно от серий “Факт…”. Это позволяет сравнить как сумму по товарам, так и посмотреть в разрезе товаров.

Интерактивное редактирование значений

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

Мы добавили возможность интерактивного редактирования значений диаграммы. Для редактирования нужно потянуть за край столбика диаграммы или за маркер графика. Во время изменения значения будет вызываться обработчик события, в котором вы сможете реализовать собственную логику (например, проверить, что значение не выходит за заданный диапазон, или пересчитать значения диаграммы). При окончании редактирования также будет вызван обработчик, в котором вы можете реализовать тяжеловесную логику (например, серверный вызов).

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

Демонстрация: в примере показывается, как с помощью диаграммы распределить средства по месяцам

Автоматическое сохранение цвета серии

Мы реализовали возможность сохранения цвета серии и использования этого цвета в другой диаграмме. Зачем это нужно? Рассмотрим на примере.

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

stableColors1.png

У прикладного разработчика будет доступ из встроенного языка к объекту, содержащему все сохраненные цвета серий. Можно будет добавлять свои пары серия-цвет (например, “Молоко” — синий), дать возможность пользователю настроить цвета, синхронизировать цвета между пользователями или базами и так далее. Естественно, можно будет использовать этот механизм и для диаграмм, вставленных на форму. Добавив совсем немного кода, можно будет, например, синхронизировать цвета серий нескольких диаграмм. Это позволит пользователю быстрее воспринимать информацию.

stableColors2.png

Доработки механизма отрисовки

Теперь некоторые виды диаграмм умеют рисоваться в браузере с помощью технологии canvas. Это значительно ускорило отрисовку диаграммы в веб-клиенте и позволило нам реализовать анимации изменения диаграммы. Диаграмма автоматически определяет что изменилось, и отображает анимацию. Данное изменение позволит наглядно показывать пользователю динамику показателей и в целом должно улучшить пользовательский опыт при работе с диаграммами.

Несколько примеров с анимацией:

  • Изменение отбора в отчете

Развитие диаграмм

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

Линии тренда

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

Линия тренда это один из самых полезных элементов оформления диаграммы. Она позволяет подчеркнуть закономерность в данных, а формула линии тренда может быть использована для прогноза. Мы реализовали несколько типов аппроксимации: линейный, полиномиальный, логарифмический, степенной и экспоненциальный.

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

01.png

Эта диаграмма, кстати, показывает и ещё одну новую возможность. Если конкретные данные серии не важны, вы можете скрыть их, и показывать только линию тренда. Для этого мы реализовали новое свойство серии ОтображатьГрафическоеПредставлениеДанныхВДиаграмме. С его помощью на приведённой выше диаграмме для серий Доход и Расход показаны только линии тренда, а для серии Прибыль (убыток) показаны и значения, и тренд.

Если выводится только одна серия, платформа раскрашивает линию тренда чёрным цветом. Если серий несколько, то каждая линия тренда выводится цветом той серии, для которой она была создана. Таково стандартное поведение платформы. Но если оно вас не устраивает, вы можете задать собственные цвета для линий тренда, такая возможность тоже есть.

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

02.png

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

Вместе с линией тренда вы можете отображать или не отображать её уравнение и коэффициент детерминации. Для этого предназначены новые свойства линии тренда ОтображатьУравнение и ОтображатьКоэффиентДетерминации.

Улучшение легенды

Как вы, наверное, заметили на первом рисунке, теперь есть возможность скрыть серию не только в области данных, но и в легенде. Для этого вы можете использовать новое свойство серии ОтображатьГрафическоеПредставлениеДанныхВЛегендеДиаграммы. С его помощью вы можете настроить область данных и легенду так, чтобы лишняя информация не мешала воспринимать основные данные.

Вообще легенда предназначена для того, чтобы пользователь мог быстро разобраться в том, какие данные представлены на диаграмме. Но раньше легенда не всегда могла полноценно выполнять эту функцию. Например, цветная диаграмма, легко читаемая на экране, при чёрно-белой печати могла стать непонятной. Потому что серии было трудно сопоставить с их легендой.

Мы доработали механизм вывода маркеров и серий в легенде диаграммы. Теперь чёрно-белые диаграммы читаются значительно лучше.

03.png

Изменения заключаются в следующем:

  • Если серия отображается с помощью линии, то в легенде рисуется часть линии, и стиль линии зависит от стиля линии серии.
  • Для линии тренда в легенде всегда рисуется часть линии тем стилем, который используется для линии тренда.
  • Если у серии или у линии тренда рисуется маркер, то он также рисуется и в легенде, по центру линии. Размер маркера в легенде зависит от размера маркера на диаграмме.
  • Если серия отображается не с помощью линии (например, в измерительной диаграмме), то в легенде рисуется квадратный маркер, размером с высоту шрифта легенды.

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

Например, для графика серии будут выводиться в прямом порядке (Пылесосы – первая), а для накопительной гистограммы – в обратном (Пылесосы — последняя). Это соответствует отображению серий в области данных и улучшает читаемость диаграмм.

04.png

05.png

При необходимости вы можете самостоятельно управлять порядком серий в легенде, для этого у диаграммы есть новое свойство ПорядокСерийВЛегенде. Кроме автоматического порядка вы можете явно установить прямой или обратный порядок.

Точечная диаграмма

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

06_01.png

Например, на этой точечной диаграмме по оси точек отложены продажи лыж, а по оси значений отложены продажи лыжных ботинок и лыжных перчаток. Значения серий показаны точками, и для каждой серии построена линия тренда. Тогда хорошо видна явная зависимость количества проданных ботинок и перчаток от количества проданных лыж.

Пузырьковая диаграмма

Другой новый вид диаграммы, пузырьковая, является развитием точечной диаграммы. Её отличие заключается в том, что вы можете показывать на ней ещё одно измерение, которое будет отображаться как размер точки (пузырька). В пузырьковую диаграмму можно выводить несколько серий. Также существует несколько алгоритмов, по которым рассчитывается размер пузырька.

07_01.png

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

Заголовки шкал

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

17.png

Настройку заголовков мы реализовали для всех шкал диаграммы: шкалы точек, шкалы значений и шкалы серий. Шкала серий, если вы не знаете, отображается только в изометрических диаграммах. Для настройки области заголовка мы даже сделали специальный небольшой редактор.

18.png

Максимум и минимум значений

Раньше у вас уже была возможность ограничить диапазон данных, отображаемых в диаграмме. Но, во-первых, для этого использовался непростой и не всегда очевидный алгоритм, а во-вторых, полученные значения всегда зависели от других параметров.

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

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

08.png

Если же вы ограничите минимальное и максимальное отображаемые значения, то динамика станет гораздо «рельефнее» и легче для восприятия.

09.png

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

Палитры цветов

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

Теперь мы сделали целый набор готовых предустановленных палитр. Для своей диаграммы вы можете выбрать одну из них, или создать собственную палитру, и использовать её в разных диаграммах.

Среди готовых палитр, которые мы добавили, есть разные по смыслу группы. Например, есть Яркая, Мягкая, Пастельная, Теплая и Холодная палитры.

10.png

Яркая палитра лучше всего подходит для диаграмм, где серии рисуются тонкими линиями. Например, для графиков. Пастельную палитру лучше всего использовать на тёмном фоне. Мягкая палитра хорошо смотрится в диаграммах, где серии рисуются большими фигурами. В гистограммах или в круговых диаграммах.

11.png

Другая группа предустановленных палитр – это градиентные палитры: Синяя, Оранжевая, Зеленая, Желтая и Серая.

12.png

Градиентные палитры лучше использовать в диаграммах, где данные однородны.

13.png

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

Интервалы измерительной диаграммы

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

14.png

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

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

19.png

В таких случаях пользователи ожидали увидеть в диаграмме тот же порядок точек, что и в таблице.

Идя навстречу пожеланиям, мы изменили стандартный порядок вывода точек в горизонтальных диаграммах на обратный. А кроме этого добавили возможность явного указания порядка с помощью нового свойства диаграммы ПорядокОтображенияТочекВГоризонтальнойДиаграмме: СверхуВниз или СнизуВверх.

20.png

Добавление новых параметров в систему компоновки данных

Все перечисленные возможности вы можете использовать при интерактивной настройке диаграмм и при программной работе с ними. А чтобы вы могли использовать их и при создании отчётов с помощью системы компоновки данных, мы добавили целый ряд новых параметров в её настройки.

Основную массу настроек вы найдёте на закладке Другие настройки.

15.png

А ещё часть настроек, связанных с конкретными сериями, мы поместили в условное оформление.

Как в 1с сделать диаграмму продуктов

Войдите как ученик, чтобы получить доступ к материалам школы

Система компоновки данных 1С 8.3 для начинающих: представление отчёта в виде диаграммы

Автор уроков и преподаватель школы: Владимир Милькин

  • Ставим цель
  • Меняем копию прошлого отчёта
  • Добавляем новый вариант отчёта
  • Настраиваем новый вариант отчёта
  • Диаграмма готова
  • В заключении модуля

Сегодня мы дополним отчёт с прошлого урока (вернее его копию) возможностью отобразить те же данные в виде диаграммы.

Ставим цель

  • Сделать копию отчёта с прошлого урока.
  • Вывести те же самые данные в виде диаграммы.
  • При этом сериями (столбцами, ось Y) должны являться продукты, а точками (ось X) — клиенты. Значения столбцов (по оси Y) и будет количество еды, которое заказал данных клиент.

Меняем копию прошлого отчёта

Делаем копию отчёта из прошлого урока под именем «Урок9» и открываем эту копию в конфигураторе базы «Гастроном».

Меняем имя отчёта на «Урок9» и нажимаем кнопку «Открыть схему компоновки данных»:

Мы не будем менять наборы данных — наша задача изменить их представление для пользователя.

Поэтому сразу переходим на закладку «Настройки» и обращаем наше внимание на левую колонку с вариантами отчёта.

Мы раньше не работали с этой колонкой, но сегодня я расскажу вам в чём её смысл.

Все настройки которые мы делаем на этой вкладке (при помощи конструктора волшебной палочки или вручную в нижней части) они относятся к одному из вариантов отчёта, который выделен в левой части окна.

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

И вот у нас сейчас есть основной вариант, в настройках которого указано — выводить данные в виде таблицы:

Давайте переименуем этот вариант (двойным щелчком) из «Основной» в «Таблица»:

Добавляем новый вариант отчёта

Теперь при помощи плюсика добавим ещё один вариант (куда мы запихаем настройка вывода данных в виде диаграммы):

Сразу назовём этот вариант «Диаграмма»:

Настраиваем новый вариант отчёта

Как видите справа от этого варианта (мы его выделили) пусто, то есть нет никаких настроек. Создадим их при помощи нашей волшебной палочки:

На этот раз выберем тип отчета «Диаграмма. «:

В качестве полей для отображения выберем «Количество» (по аналогии с таблицей):

В качестве серий (ось Y) укажем поле «Еда», а в качестве точек (ось X) — поле «Клиенты»:

Получилось вот так:

Сохраним наш отчёт в конфигураторе и запустим его в режиме пользователя:

Мы видим таблицу. что такое?! А дело в том, что нужно просто выбрать другой вариант отчёта. Нажимаем на кнопку «Выбрать вариант. » и выбираем вариант «Диаграмма»:

Диаграмма готова

Ещё раз формируем отчёт:

Отлично, какая красота

Эталонная обработка, после выполнения всех шагов этого урока

Войдите на сайт как ученик

Авторизуйтесь, чтобы получить доступ ко всем материалам школы

В заключении модуля

На этом мы заканчиваем рассмотрение основ системы компоновки данных. Я постарался рассказать и объяснить на простых примерах фундаментальные основы, необходимые новичкам для работы с СКД.

Если у вас в будущем (я советую делать это уже после окончания всей школы) возникнет потребность в более глубоком изучении системы компоновки данных — есть замечательная книга Е. Ю. Хрусталёвой «Разработка сложных отчётов в 1С:Предприятие 8».

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

Мы отлично поработали, пора отдохнуть!

Для учеников

Прибегайте к изучению эталонного варианта только после самостоятельного выполнения всех шагов.

На вопросы учеников — отвечаю по почте, но прежде загляните в ЧАВО (ссылка) .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *