Ранее я использовал React + Antdesign для реализации простой диаграммы времени, но позже у меня были более сложные требования и требовали одновременно отображение 2000 задач, которые включали проблемы с производительностью. Демонстрация, которая в основном удовлетворяет следующие потребности, но механизм рендеринга React вызвал серьезные проблемы с производительностью. застрявший. Подумав об этом, я решил использовать оригинальный саундтрек JS+CSS+HTML для его реализации, потому что производительность под оригинальным саундтреком JS является лучшим. Давайте поговорим о требованиях новой версии:
Задача отображается в структуре дерева слева, складываемой
Правая сторона показывает продолжительность задачи для запуска
Необходимо использовать строки, чтобы связать взаимосвязь между задачами
Вы можете масштабировать право просмотреть подробный статус задачи
При масштабировании графика остается в определенной пропорции в обоих концах с мышью в качестве центра.
При масштабировании графика это означает, что время, необходимое для задачи и координат, необходимо соответствующим образом изменить соответствующее изменение в зависимости от доли увеличения изображения.
Когда мышь перемещается на графике времени, линия, по -видимому, показывает текущее время и информацию.
Трудности в реализации
Мышь Zoom, x-ось Zoom
Зум мыши генерирует масштабирование оси x схемы времени. Масштабирование графиков времени дает здесь три идеи:
Перехватывает перехват данных, перехватывайте данные до и после в соответствии с определенным алгоритмом, а затем повторно заполните всю страницу
Используйте CSS3 Scalex, чтобы масштабировать DOM графика времени
Фактическое изменение ширины диаграммы времени Dom, длина выполнения задачи, длину соединительных линий и ожидаемое время, необходимое для выполнения задачи, отображаются в процентах.
Преимущества и недостатки трех идей:
Преимущества: нет необходимости в управлении атрибутами DOM CSS, и более удобно повторно их рендеринг между ними. Недостатки: для использования DOM REDRAW он потребляет сильную производительность и очень медленная, когда он рендеринг с большим количеством задач.
Преимущества: просто измените CSS DOM, загрузите быстро и обрабатывайте больше. Недостатки: Комплекты являются проблемными.
Преимущества: быстрая загрузка и очень плавная. Недостатки: при использовании процентных расчетов будут определенные ошибки, и вы увидите их, когда вы в определенной степени увеличитесь. (Все дело рассматривается, я использую третий тип)
// функция, которая вычисляет процент ширины // окончание времени: время окончания задачи // startTime: время начала задачи // maxtime: максимальное значение всех задач // mintime: минимальное значение всех задач. Весь порядок восходящего порядок начала задачи Время и время окончания // task_width: длина задачи, длина горизонтальной линии соединения, левое значение вертикальной линии соединения widthfun = function (конец времени, начало, maxtime, mintime) {const task_width = ((((((конец времени, maxtime, mintime) {const task_width = ((((( Number (EndTime) - Number (startTime)) / ((maxtime || time [time.length - 1]) - (mintime || time [0])) * (body_width - tree_box_dom.offsetwidth)) / dom.offset Ширина * 100;Зум мыши, держите мышь в центре, увеличивайте с обеих сторон
Давайте сначала поместим диаграмму процесса вывода:
// Объяснение приведенного выше рисунка // Dom = DOM -элемент диаграммы времени // doml1, domel2 = dom.scrollleft; // domel1 представляет предыдущий Dom.scrollf Представляет ток масштаб увеличения // Scale1 представляет увеличение последнего времени // tree_dom.offsetwidth представляет ширину дерева на левом // clientX1 представляет расстояние от левой стороны положения мыши прошлого раз = e.clientx - tree_dom.offsetwidth // clientx2 представляет расстояние от текущей позиции мыши до схемы синхронизации // масштабирование с мышью в качестве центра, формула: doml2 = domel1 (Scale/Scale1) + Clientx1 (Scale/ Scale1) - e.clientx + tree_dom.OffSetWidth // Формула Объяснение: // 1. Scale/Scale1 представляет соотношение масштабирования этого времени, за исключением отношения масштабирования предыдущего, что указывает на отношение масштабирования тока // ширина Левый объем также будет масштабироваться во время второго масштабирования, поэтому ширина слева должна быть умножна на шкалу масштабирования // ширина на левой стороне расстояния положения мыши от таблицы временных районов также будет масштабироваться при масштабировании, так что вы Следует также умножить на шкалу масштабирования // фактическое расстояние на левой стороне расстояния положения мыши от таблицы временной диаграммы на конце равна масштабированию длины левого прокрутки // кода страницы Time_box_parent.scrollleft = (time_box_parent. scrollleft + e.clientx - tree_box_dom.offsetwidth) * (scale_x / scale_x1) - e.clien tx + tree_box_dom.offsetwidth;
Используйте связи, чтобы представлять отношения между задачами
план:
При использовании CSS3 + JS + HTML5 нарисуется псевдо-элементами.
Оберните изображения прямоугольника с DOM и установите их положение и высоту.
Нарисуйте с этикетками
Плюсы и минусы:
Преимущества: дополнительные теги не добавляются, что полезно для рендеринга. Недостатки: родительская задача генерирует несколько дочерних задач, и трудно добавить псевдо-классы и установить высоту и ширину псевдо-классов.
Преимущества: Удобно, просто рассчитайте высоту задачи дочерней задачи из родительской задачи. Недостатки: когда будет слишком много задач, будет много фотографий, что сильно повлияет на производительность.
Преимущества: высота и положение каждого элемента контролируются индивидуально, с высокой управляемостью и цветом обратной связи могут быть добавлены. Недостатки: добавлено больше элементов, которые оказывают влияние на рендеринг (я использую третий тип, который является глупым методом. Большой парень с лучшим методом может дать предложения, спасибо)
Идеи реализации:
Используйте переменную для записи глубины иерархии каждой задачи. Используйте накопленные переменные, чтобы получить высоту вертикальной линии, а верхнее значение горизонтальной линии в определенной пропорции. (Используйте функцию процентной ширины выше)
Временная единица: день, час, минута, второй
Это относительно простая идея реализации:
Поскольку шкала времени этой демонстрации времени является шкалой, определите, делится ли разница между минимальным отметкой времени и максимальной маркой времени на 4, будь то еще один день (60 * 60 * 24, преобразован в секунды), спуска Заказ от большого до маленького Получите время.