Как получить маркер диаграмм сложности

Изменение цветов маркеров данных одного ряда на диаграмме

Excel для Microsoft 365 Word для Microsoft 365 Outlook для Microsoft 365 PowerPoint для Microsoft 365 Excel для Microsoft 365 для Mac Word для Microsoft 365 для Mac PowerPoint для Microsoft 365 для Mac Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Excel 2021 для Mac Word 2021 для Mac PowerPoint 2021 для Mac Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Excel 2019 для Mac Word 2019 для Mac PowerPoint 2019 для Mac Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Excel 2013 Word 2013 Outlook 2013 PowerPoint 2013 Еще. Меньше

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

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

Вы также можете изменить цвета, изменив цвет каждого маркера данных вручную.

Важно: Для успешного выполнения этих процедур необходимо иметь существующую диаграмму. Дополнительные сведения о выборе и добавлении диаграмм см. в статье Доступные типы диаграмм в Office.

Автоматическое изменение всех цветов маркеров данных по точкам или срезам

1. На диаграмме щелкните, чтобы выбрать ряд данных, для которого требуется изменить цвета.
2. На вкладке Формат в группе Текущий фрагмент нажмите кнопку Формат выделенного фрагмента.
3. В области Формат рядов данных откройте вкладку & строка

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

Изменение цвета отдельных маркеров данных вручную

1. На диаграмме выберите отдельный маркер данных, который нужно изменить.
2. На вкладке Формат в группе Стили фигур выберите элемент Заливка фигуры.

Чтобы изменить цвет заливки, в разделе Цвета темы или Стандартные цвета выберите нужный цвет.

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

Совет: Дополнительные сведения об изменении внешнего вида элементов диаграммы см. в разделе Изменение цвета или стиля диаграммы в Office.

Важно: Для успешного выполнения этих процедур необходимо иметь существующую диаграмму. Дополнительные сведения о выборе и добавлении диаграмм см. в статье Доступные типы диаграмм в Office.

Автоматическое изменение всех цветов маркеров данных по точкам или срезам

1. На диаграмме щелкните, чтобы выбрать ряд данных, для которого требуется изменить цвета.
2. Перейдите на вкладку Формат и выберите ряд в раскрывающемся списке Элементы диаграммы, а затем на ленте выберите пункт Формат области .

В области Формат ряда данных откройте вкладку Заливка & линии

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

Изменение цвета отдельных маркеров данных вручную

1. На диаграмме выберите отдельный маркер данных, который нужно изменить.
2. На вкладке Формат щелкните Заливка фигуры.

Чтобы изменить цвет заливки, в разделе Цвета темы или Стандартные цвета выберите нужный цвет.

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

Совет: Дополнительные сведения об изменении внешнего вида элементов диаграммы см. в разделе Изменение формата элементов диаграммы.

Изменение маркеров данных на графиках, а также точечных и лепестковых диаграммах

Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

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

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

Дополнительные сведения о том, как создавать диаграммы таких типов, см. в статьях типы диаграмм в Office и Создание диаграммы от начала и до конца.

1. На линейной, точечной или лепестковой диаграмме выполните одно из указанных ниже действий.
   • Чтобы выделить все маркеры данных в ряду данных, щелкните один из маркеров.
   • Чтобы выделить один маркер данных, щелкните его дважды. Откроется панель Работа с диаграммами с дополнительными вкладками Конструктор, Макет и Формат.
2. На вкладке Формат в группе Текущий фрагмент нажмите кнопку Формат выделенного фрагмента.

Примечание: Если вы выбираете в качестве маркера рисунок, необходимо также выполнить действие 6, чтобы выбрать изображение.

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

Совет: Чтобы заполнить маркер данных изображением, выберите вариант Рисунок или текстура, а затем в разделе Вставить из выберите вариант Файл, Буфер обмена (если скопировали туда изображение) или Картинки, чтобы выбрать нужное изображение.

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

Как получить маркер диаграмм сложности

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

1. Удалите «шумы» с фона графики

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

От сетки на графике избавиться элементарно. Если необходимо применить формат к чему-либо в Excel (на диаграмме или в таблице), то просто выделите это и нажмите кнопки Ctrl+1 (для Mac: Command+1) – откроется диалоговое окно форматирования выбранных объектов.

В нашем случае щёлкаете одну из линий сетки на диаграмме (любую, но верхняя выделит всю область графика) и открываете диалоговое окно форматирования. Дальше выбираемЦвет линии > Нет линий (для Mac: Линия > Сплошная > Цвет: Без линии ).

2. Переместите легенду

По неизвестной причине Excel по умолчанию размещает легенду справа от графика (легенда – пояснительная информация к графику). В большинстве случаев это жутко неудобно. Предпочтительно размещать легенду над или под графиком. Чаще её логичнее оставить сверху, но если информации много или это круговая диаграмма, то опускаем легенду вниз.

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

Не снимая выделения с легенды, сразу увеличиваем размер шрифта до 12. Выделять сам текст не надо, достаточно выделенного прямоугольника. Оцените сами, что лучше смотрится…

3. Удалите легенду с единственным рядом

Если на графике отражён только один показатель, нет смысла сохранять легенду, которую Excel вставляет автоматически. Достаточно включить название показателя в заголовок.

4. Добавьте описание в название диаграммы

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

Например, для диаграммы приведённой ниже, было бы малоинформативно написать в заголовке только лишь «Показы»:

Чтобы добавить название к выделенному графику выберите Работа с диаграммами > Макет > Название диаграммы > нужный пункт. Для Mac соответственно: Диаграммы > Макет диаграммы > Название диаграммы > нужный пункт. Обычно разумнее выбрать Над диаграммой (Mac: Название над диаграммой).

5. Отсортируйте данные перед созданием диаграмм

Считаем данный пункт достойным особого внимания. Диаграммы, которые создаются из несортированных данных, гораздо труднее читать и интерпретировать.

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

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

А вот на следующей диаграмме провести сортировку и интерпретацию гораздо легче, так как это уже фактически сделано за вас.

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

6. Не заставляйте людей наклонять голову

Видели ли вы диаграммы подобные этой?

Или ещё хуже?

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

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

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

7. Приведите в порядок оси

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

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

Отсутствуют разделители групп разрядов

Если в данных присутствуют числа больше чем 999, необходимо включить разделитель групп разрядов. Лучше всего отформатировать данные прямо в таблице. После этого диаграмма обновится автоматически. В противном случае необходимо снять флажок Связь с источником в окне настроек Формат оси.

Для включения разделителя групп выделите столбец с данными и нажмите кнопку 000 в группе Число. Появится разделитель, и Excel по умолчанию добавит два знака после запятой.

Или же можно открыть диалоговое окно форматирования, нажав стрелочку справа внизу у группы Число.

Загромождённость осей

Вертикальная ось на верхней диаграмме загромождена лишними подписями. Для исправления этого выделите ось и вызовите диалоговое окно. В Параметрах осиустановите переключатель цена основных делений на фиксированный (для Mac_: Формат осей > Масштаб > цена основных делений_). На нижней диаграмме этот параметр изменён с 20 000 на 40 000.

Если нужно более детальное разбиение, подберите шаг любым удобным способом.

Ненужные десятичные знаки

Никогда не включайте десятичные дроби, если все числа – целые (иными словами отсутствуют дробные части). Наиболее часто такое можно увидеть при использовании формата _Денежный, _где встречаются подобные подписи: $20 000.00, $30 000.00, и т.д. Это совершенно бесполезно и только мешает.

Десятичные дроби вместо процентов

Если на оси показаны проценты, форматируйте данные как проценты, не выводите их десятичными дробями. Чем меньше времени придётся тратить на интерпретацию данных, тем более привлекательной будет графика. И даже с процентами не забывайте убрать ненужные дроби. Иначе говоря, не делайте так: 10,00%, 20,00%… Преобразуйте к такому виду: 10%, 20%…

Жуткое форматирование ноля

Последнее неудобство – вывод дефиса вместо 0 в начале вертикальной оси. Это очень распространено. В Интернете можно найти, как работать с пользовательским числовым форматом. Там рассматриваются некоторые любопытные настройки, например, возможность добавлять текст к форматированию с сохранением числовых значений ячейки.

В данном случае нам достаточно изменить формат для 0. Для этого выделяем столбец, из которого берутся данные, потом вызываем диалоговое окно и на вкладке Число, в пункте(все форматы) находим строку «своего», в ней заменяем дефис на 0.

Интерактивные и документированные диаграммы для сложных систем

Мой первый on-call выдался нелегким. Недели тренингов и обучения не подготовили меня к тому что придется искать по Slack каналам различных команд того, кто может что либо знать о какой-то части системы. Оказалось что многие страницы в корпоративной Wiki уже не обновлялись несколько лет. Команды хранили свою документацию кто где хотел: кто в Wiki, кто в Google Docs, кто в GitHub и т.д. Наш on-call был не идеален: 2 человека выходили на дежурство 24/7. Один был ответственен за всю инфраструктуру (MySql, Cassandra, Kafka, ElasticSearch, Nomad и т.д.), второй же был Developer on-call и отвечал за все микросервисы и различные легаси системы, что в сумме давало около 300 различных сервисов от 6-ти команд на самых различных стеках и фреймворках (Java, Scala, Node, Go). Но что меня беспокоило больше всего — это невозможность быстро оценить на высшем уровне как проходит и обрабатывается запрос от пользователя. Диаграммы для разных бизнес частей точно также были либо устаревшими, либо без прилегающей документации, либо для какой-то бизнес логики не было абсолютно ничего. И вот тогда появилась идея интерактивных диаграмм, в которых можно не только нажать на любой элемент и добыть о нем более детальную информацию, но также получить ссылки на другие диаграммы и динамически их подгружать, а в случае изменений там же отредактировать и сохранить. Мне хотелось иметь возможность быстро разобраться в неизвестной распределенной системе, не переключаясь между диаграммой и документацией в Google Docs или Wiki. Так я начал работать над собственным решением для редактирования диаграмм, которое позже развилось до полноценного редактора прототипов и векторных изображений. Предупреждение: в статье содержится большое количество GIF-изображений.

Первое над чем я начал работать — это простейший редактор диаграмм со встроенной документацией, который я назвал Schemio. Рендеринг был реализован на SVG, а в качестве фреймворка был выбран Vue.js. Первоначальная реализация Schemio была простой. Идея заключалась в том, что при нажатии на любой элемент диаграммы, появится текст с документацией этого элемента. Таким образом можно было бы документировать отдельные части диаграммы, а не просто прилагать саму диаграмму к тексту описания какой-нибудь системы, как это обычно делается. Однако со временем появились новые идеи, добавились анимации и сложные интерактивные элементы и было решено сделать облачную платформу для совместной работы. В этой статье я попытаюсь описать как работает редактор интерактивных диаграмм и его возможности.

В общем, Schem.io — это платформа, основанная на открытом исходном коде, предназначенная для создания документированных и интерактивных диаграмм, прототипов приложений, векторных изображений и образовательных демонстраций с возможностью коллективной работы. В Schemio доступны два режима: редактор и просмотр. В режиме редактора пользователи могут создавать объекты, соединять их, добавлять документацию и указывать поведение в ответ на различные события (например, наведение курсора или нажатие кнопки мыши). В режиме просмотра пользователи могут взаимодействовать с элементами диаграммы, читать документацию к каждому объекту, загружать другие диаграммы и многое другое. По умолчанию все диаграммы открываются в режиме просмотра, таким образом представляя собой интерактивную базу знаний.

Редактор диаграмм

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

Также элементу диаграммы можно дать имя, наделить его собственным описанием, добавить ссылки и теги. Если у объекта будет свое описание (поле «Description»), то в режиме просмотра, если нажать на такой элемент, появится окошко с его именем и описанием. Таким образом дается возможность документировать различные элементы диаграммы. Есть два режима показа документации: всплывающее окошко (tooltip) или же боковая панель (side-panel). Последняя опция удобна в случае объемного описания.

Если какому-нибудь элементу диаграммы добавить ссылки, то в режиме просмотра, при нажатии на этот элемент, появятся ссылки с плавной анимацией.

Одними из самых важных элементов любых диаграмм конечно же являются соединительные линии. В Schemio они называются коннекторами (connector) и могут прикрепляться к другим элементам, что позволяет обновлять их при перемещении этих элементов.

Еще одной особенностью Schemio является наличие HUD (head-up display). Его особенность в том, что в режиме просмотра такой объект будет всегда в одном и том же месте, независимо от скроллинга в самой диаграмме. Такое решение очень удобно для создания интерактивных меню и всплывающих панелей.

Компоненты и динамическая загрузка диаграмм

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

Компоненты могут быть встроенными (embedded) или внешними (external). Встроенные компоненты позволяют клонировать существующие сложные объекты. Любые изменения оригинала мгновенно отображаются на его копиях.

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

Редактор поведения

Интерактивность является ключевым функционалом Schemio и позволяет создавать всевозможные анимации, визуальные эффекты, а также реализовывать сложные сценарии в диаграмме.

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

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

По умолчанию, при добавлении действия, используется опция “self”, что означает что действия применяются к тому же элементу, для которого было вызвано событие. Но мы можем вызывать любые действия с любыми другими элементами. Например, мы можем добавить событие “Clicked” в нашем первом элементе, но в действиях указать на какой-нибудь прямоугольник в диаграмме, таким образом симулируя открытия панели при нажатии на кнопку.

Плавно показать элемент уже не плохо, но еще интереснее скомбинировать это с другими анимациями. Анимации в редакторе поведения могут запускаться параллельно с другими, если выделить флажок “In Background”. Таким образом можно вместе с плавным появлением панели сделать еще и анимацию движения.

Важно еще отметить событие «Init», которое вызывается у каждого элемента диаграммы при ее загрузке. Так можно оставить абсолютно все элементы диаграммы в режиме редактирования, но спрятать какие-то из них при загрузке, чтобы пользователь постепенно их открывал. Однако создавать обработчик инициализации для каждого элемента диаграммы — не очень удобно. В случае когда таких объектов много и все они должны получить одинаковое поведение, можно воспользоваться тегами. Сначала нужно выделить эти объекты и отметить их каким-нибудь тегом, например “hide-on-init”.

Потом добавляем в сцену объект пустышку (Dummy) и уже у него создаем обработчик на событие «Init». Выбираем функцию «Hide» и отключаем ее анимацию, но только вместо объекта “self” укажем тег “hide-on-init”. Как только мы войдем в режим просмотра, этот обработчик событий запустит функцию «Hide» для всех объектов отмеченных тегом «hide-on-init». Dummy объекты не прорисовываются в режиме просмотра и используются в основном либо для группировки других объектов, либо для обработки их событий, как в данном примере.

Существует еже возможность указывать собственные события (“Custom event”). При выборе этой опции мы можем указать любое название события, например “Expand”. Такое событие может быть вызвано из других событий любых объектов. Мы можем добавить событие «Clicked» на какой-нибудь другой объект и уже оттуда вызвать событие “Expand” предыдущего объекта. На картинке ниже можно заметить, что он оказывается в опциях среди различных функций объектов.

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

Динамическое копирование поведения

В примере повыше было показано как изменять состояния множества объектов с помощью тегов, но что если мы хотим чтобы у множества объектов было одинаковое поведение? Например: что если на нашей диаграмме будет большое количество кнопок, которые будут изменять свою прозрачность или цвет при наведении курсора? Можно конечно же создать одну такую кнопку и просто копировать ее. Но что если мы уже скопировали 20 таких кнопок, но позже решили что нужно подправить их реакцию на наведение курсора? В таких случаях можно пойти другим путем. Вместо копирования кнопки, мы просто для всех кнопок выберем какой-нибудь тег, например “button”. После этого создаем один шаблонный объект кнопки без тега и в нем реализуем реакцию на курсор мышки. Затем в нем же создаем событие “Init”, в котором добавляем действие “Copy events”. В самом “Copy events” в параметре “Destination items” выберем наш тег “button”. Вот и все, в результате, когда мы перейдем в режим просмотра, то все кнопки отмеченные тегом “button” скопируют себе поведение шаблонной кнопки и будут одинаково реагировать на курсор мышки.

Есть еще две похожих функций под названием “Copy links” и “Copy description”, которые, как вы могли догадаться, копируют ссылки и описание для других объектов. Это может быть полезно если у вас есть много различных похожих объектов одно и того же типа, но вы не хотели бы постоянно синхронизировать измененный текст или ссылки.

Анимации

Собственно в предыдущих примерах вы уже познакомились с некоторыми анимациями. Практически у всех функций анимаций есть параметр “Transition” который определяет плавность анимации. Из доступных опций есть: «linear», «smooth», «ease-in», «ease-out», «ease-in-out», «bounce».

В Schemio есть уже готовый набор анимаций: эффект частиц, мигание, анимация контура, морфинг объекта, масштабирование, вращение и т.д.

Покадровая анимация

В предыдущих примерах мы рассмотрели самые простые функции анимаций, но что если мы хотим реализовать нечто посложней? В таком случае нам понадобится покадровая анимация, которая реализуется с помощью объекта “Frame Player”.

Каждый объект “Frame player” хранит в себе кадры изменений других объектов на сцене и может быть использован по разному. Например мы можем использовать его как кнопку запуска анимации.

Либо, мы можем указать так называемые секции анимации, что откроет дополнительные кнопки. Для этого есть отдельный трек в редакторе анимаций под названием «Sections». При создании кадра в таком треке, нужно указать имя секции. Если у объекта «Frame player» добавлены секции, то в режиме просмотра он получает дополнительные кнопки. Так мы сможем либо проиграть всю анимацию, либо перематывать анимацию в ручном режиме до следующей или предыдущих секций.

Можно спрятать объект «Frame player» и вызвать анимацию из другого объекта. В редакторе сценариев, если выбрать объект “Frame player”, появится еще две функции “Play Frames” и “Stop Frame Player”. Первая функция запускает анимацию в данном плеере, давая возможность выбрать начальный и конечный кадры. Анимация “Stop Frame Player” останавливает анимацию.

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

В случае если же нужно анимировать движение объекта по какому то пути, то есть дополнительная функция “Move along path”. Ее можно добавить к матрице нажав на кнопку “Add path function”. Тогда появится новая дорожка в которой мы можем по кадрам указать относительное расположение выбранного объекта на контуре другого объекта.

С помощью покадровой анимации можно добиться очень интересных визуализаций. Вот пример анимированной диаграммы ARP запроса: https://schem.io/projects/site-reliability-engineering-t4kEQtKNxpSvZG0b/docs/arp-packet-0wgKzJg4RUI4z3a7

SchemioScript

Со временем возможностей Schemio мне стало не хватать. Я хотел реализовать более сложные элементы (напр. панель вкладок, слайд шоу и т.п.), но это было сложно сделать лишь с имеющимися функциями анимаций. Поэтому я приступил к работе над собственным скриптовым языком SchemioScript. Сам язык немного похож на JavaScript, но он более простой. Хоть это было и очень интересной задачкой, и мне не хотелось останавливаться, но я реализовал лишь самые базовые вещи, достаточные для программирования любых сложных поведений в диаграмме. Язык SchemioScript подробно описан по этой ссылке. Начать программирование в языке SchemioScript можно с помощью функции “Script” в редакторе поведения.

Сам скрипт может быть запущен в трех режимах:

• One time — запускается только один раз при вызове функции “Script”
• Animation — запускает скрипт как анимацию, в которой можно указать плавность анимации и ее длительность. В таком случае скрипту в область видимости передается переменная t , которая представляет собой прогресс анимации от 0 до 1. Т.е., если мы захотим анимировать движение по оси X от 10 до 100, то это можно реализовать вот так: setX(10 * (1 — t) + 100 * t) . Тип плавности анимации (transition) влияет на изменение параметра t . Таким образом можно не заботиться в самом скрипте о плавности анимации.
• Infinite loop — скрипт запускается в режиме бесконечной анимация. В таком случае уже нет переменной t , но зато передается переменная deltaTime , которая представляет собой разницу в секундах между текущим и предыдущим кадрами. Остановить такую анимацию можно либо вызвав функцию “Stop all animations” в редакторе событий, либо вызвать функцию stop() внутри скрипта. Что у типа “Animation”, что у “Infinite Loop” есть дополнительные скрипты “Init” и “On Finish”, которые соответственно вызываются в начале и в конце анимации.

Вот пример скриптовой анимации комбинированной со встроенной возможностью перемещения (drag-n-drop):

Небольшой пример кода SchemioScript:

// Находим объекты на сцене по имени и получаем их значение mass = findItemByName('mass').getValue() ropeStrength = findItemByName('rope-strength').getValue() g = Vector(0, findItemByName('gravity').getValue()*1000) // получаем позицию текущего объекта, для которого вызван этот скрипт pos = getWorldPos() // получаем позицию объекта объявленого в скрипте инициализации anchorPos = anchor.getWorldPos() airFrictionConst = findItemByName('air-friction').getValue() / 1000 airFriction = - airFrictionConst * mass * velocity * velocity.length() / 2 // в SchemioScript можно работать с векторными вычислениями // также как и со скалярными ropeVector = anchorPos - pos distance = ropeVector.length() Frope = ropeVector * ropeStrength * distance acc = (mass * g + Frope + airFriction) / mass velocity += acc * deltaTime if (velocity.x > 10000) < velocity.x = 10000 >if (velocity.x < -10000) < velocity.x = -10000 >if (velocity.y > 10000) < velocity.y = 10000 >if (velocity.y < -10000) < velocity.y = -10000 >pos += velocity * deltaTime // Изменяем позицию текущего объекта (для которого был вызван скрипт) // Причем в это случае нам все равно, прикреплен ли объект к другому объекту // или нет. setWorldPos расположит объект так что он будет соответствовать // трансформации сцены. setWorldPos(pos.x, pos.y) 

Шаблоны

Так как теперь стало легче реализовывать сложное поведение объектов в Schemio, были добавлены так называемые шаблоны (Item templates). Например есть шаблоны для дизайна прототипов приложений, панель с вкладками, выпадающий список, слайд шоу и т.д. В случае использования такого шаблона редактор позволяет обновлять сгенериованный объект, даже в случае добавления к нему других пользовательских объектов.

Совместное редактирование в Schem.io

В https://schem.io реализована возможность совместной работы с диаграммами. К сожалению пока что в нем нет режима реального времени. Изменения применяются в виде патчей, что дает возможность откатиться назад или работать нескольким пользователям с одним документом, сливая их изменения и не давая перетереть работу друг друга. Также можно организовать проекты и приглашать туда людей с правами редактирования или просмотра. Но самая интересная функциональность — это Patch Requests. Я хотел развивать Schemio не просто как редактор диаграмм, но также как и интерактивную базу знаний доступную для всех. К сожалению одному все это не потянуть, поэтому я добавил возможность любому зарегистрированному пользователю редактировать чужие публичные диаграммы и отсылать авторам запросы на обновления (Patch Requests). Также можно сделать форк чужой диаграммы, если предполагается что работа будет долгой, а затем из форка уже можно создать запрос на изменение.

В таком Patch Request можно подсветить удаленные, измененные или добавленные объекты и подробно увидеть изменения всех настроек и текста. По аналогии с GitHub можно обсудить Patch Request в комментариях, принять или отклонить изменения.

Запуск Schemio из Docker контейнера

Браузерная часть Schemio вместе с альтернативным бэкендом является открытой, распространяется по лицензии Mozilla Public License и выложена на GitHub (https://github.com/ishubin/schemio). Вы можете запустить сервер Schemio из Docker контейнера. Правда в таком случае функционал на бэкенде будет сильно ограничен: диаграммы хранятся просто на файловой системе, нет управления пользователями и отсутствует функционал разрешения конфликтов изменений документа. Запустить контейнер Schemio можно вот так:

docker pull binshu/schemio:latest docker run -v "$(pwd):/opt/schemio" \ -p 4010:4010 \ -e FS_ROOT_PATH=/opt/schemio \ -e SERVER_PORT=4010 \ binshu/schemio:latest

Экспорт SVG, PNG и GIF

Schemio поддерживает экспорт диаграммы или выделенных объектов не только в векторном или растровом формате, но также и в анимированном виде в формате GIF. Для этого нужно выбрать в верхнем левом меню опции “Export as SVG”, “Export as PNG” или “Export animation”. В случае экспорта анимации, нужно выбрать длительность, размер и количество кадров в секунду и тогда Schemio перейдет в режим просмотра и начнет запись всех взаимодействий с диаграммой.

Экспорт в HTML player или iframe

Существует возможность экспорта диаграммы в полностью автономный HTML плеер, который можно расположить у себя на сайте. Сам плеер будет полностью отрезан от функционала редактора и в нем будет лишь только просмотр. Для этого нужно в меню выбрать опцию «Export as HTML»

Планы на будущее

Я продолжаю развивать Schemio и в данный момент работаю над расширением функционала шаблонов и анимаций. Помимо самого редактора я также параллельно работаю над созданием интерактивной базы знаний. Пока что начал с самого частого вопроса на собеседованиях “Что происходит, когда мы открываем сайт в браузере”: https://schem.io/projects/site-reliability-engineering-t4kEQtKNxpSvZG0b/docs/what-happens-when-you-enter-a-website-in-a-browser-USqkMRHEY7JZav9t. В дальнейшем хочу начать документировать все что может быть интересно в IT тематике: System Design, Kubernetes, Mysql, Kafka, алгоритмы и т.д. К сожалению, основное время уходит как на сам редактор Schemio, так и на поддержку его облачной платформы. Если вам интересен этот проект и сам формат подачи информации, предлагаю присылать свои патчи или создавать свои проекты на https://schem.io.

Ссылки

• https://schem.io — облачный сервис Schemio для совместной работы и публикации своих диаграмм
• https://schemio.app — онлайн сервис Schemio с бекендом Google Drive. Все диаграммы доступны только самому пользователю и хранятся в Google Drive.
• https://github.com/ishubin/schemio — код фронтенда Schemio, Electron версии и простого бекенда
• https://schem.io/projects/site-reliability-engineering-t4kEQtKNxpSvZG0b — проект интерактивной документции на тему “Site Reliability Engineering”.

• Интерактивные диаграммы
• прототипирование
• svg