Диаграмма TimeLine. Этапы маршрута на шкале времени

Программирование - Практика программирования

тайм лайн таймлайн timeline time line диаграмма css стилизация. html шаблон линейка времени

4
Визуализация цифровых данных помогает скорейшему усвоению информации и принятию своевременных решений. Конечно, приведённые данные не будут критичны к отображению по времени, но дают наглядное представление и помогают выявить узкое горлышко в бизнес-процессе. Для примера отразим поход Дерсу Узала по уссурийскому краю МЫ.

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

  1. Данные по маршруту: Дата, Название точки
  2. Норматив по времени между двух точек, Описание действия между этими точками

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

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

Набросок маршрута

Второе. Накидали по-быстрому шаблон в HTML. 

Макет диаграммы

Третье. Пояснили себе, какие данные будут отображаться в нём.

Четвёртое и очень длинное. Приступил к раскраске таблички, да! Я рисую это в таблице. Думаю, что можно блоками нарисовать, но удовольствия получим ничуть не меньше. И тут 1С преподносит нам первый сюрприз. Нет границ ячеек, которые мы стилями выделили. +2 часа и 3 литра чая к карме. Решение нашлось, нет содержимого в ячейке - нет границ, а зачем собственно они нам, подумал движок 1С, и рисовать бордюры отказался. Небольшой П.С. Не увидев границ в отчёте, мы его сохраняем на диске и снова открываем, и что же мы видим, границы есть, даже те, что нам не нужны. Фото нет. Верить на слово.

Это была первая преграда на пути к победе. Вторая: отказ прижимать блок в право или растягивать блок/таблицу внутри ячейки на 100% её ширины. Смотрим отчёт.

Всё прекрасно, превышения установленного графика движения не показывает (пока 100%). Ограничиваем интервал. Но только таблица разрядилась (отстрелялась), см рисунок ниже, как чудо пропало. А так хорошо всё начиналось.

Глядим на вторую ячейку и радуемся 100% заполнению сиреневым цветом. ХА! Поздравляю у нас праздник, родился новый браузер. Когда все нормальные браузеры уже давно отображают желанный результат. Встроенный браузер 1С  наотрез отказывается рисовать бордюры и выравнивать элементы. Даже злой IE Ослёрер сдался мне без боя.

Решив проблему с выравниванием справа внутри ячейки, мы натыкаемся на новую проблему, те ячейки, в которых присутствует блок с данными о превышении норматива, показывают теперь нам границы, перекрашивая их из чёрного цвета в белый. Ай красиво! Вот точно так я и представлял себе эту диаграмму. А Ч-Ё-ё!

Ячейки с пропавшим оформлением

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

 

Отчёт в 1С заиграл красками. 

 

Вид из окна Хромого

Так она смотрится в хроме.

 

Вид из домика Осла

Так в осле. (IE, а может ИА)

 

РедПанда показывает без задвигов.

Создавалось творение на платформе 8.3.10.2650 , тестировалось на конфигурации БП 3. Написано на управляемых формах. Работать будет везде. Я так решил.

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

П.С.

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

2. При печати столкнулся с тем, что 1с/браузеры очищают заливку ячеек/блоков. (была попытка переписать всё на блоках, Но очистка заливки и угадывание длины основного блока для предотвращения складывания длинной шкалы прервали движение в этом направлении). Способ напечатать нашёлся: Нужно открыть предварительный просмотр, Нажать на кнопку - "Параметры страницы" и установить галку на - "Печатать цвет фона и рисунки".

4

Скачать файлы

Наименование Файл Версия Размер
Диаграмма TimeLine! Этапы маршрута на шкале времени. (Поход Дерсу):
.epf 14,72Kb
16.05.18
2
.epf 14,72Kb 2 Скачать

См. также

Комментарии
Избранное Подписка Сортировка: Древо
1. aspirator23 358 26.05.18 09:24 Сейчас в теме
Мне казалось он там был в прошлом веке, а оказывается весной этого года. Эвона как. =)
Оставьте свое сообщение