Об авторе Kid Ant Financial Data Experience Технологическая команда
В этой статье рассказывается, как нарисовать бизнес-диаграмму с нуля, а также некоторые мысли об общности. Код также указан в конце.
Демонстрация эффекта
Сначала посмотрите на окончательный эффект компонента
Нарисовать картинку, конечно, сначала ищите что-то, что можно использовать напрямую. То, что мне нужно рисовать, это график класса Gantt. Основная цель состоит в том, чтобы управлять трудоемкими задачами во временном исходном уровне и сможем сравнивать с прошедшим трудоемким временем. Есть некоторые различия от традиционного определения графика Ганта. Похоже на диаграмму гантта.
Ищу AntV, echarts и D3. Ни AntV, ни электронные диаграммы не имеют прямой диаграммы Ганта. На D3 есть несколько диаграмм Ганта, но они сильно отличаются от того, что я хочу. Стоимость доработки на их основе должна быть выше стоимости самостоятельного рисования. Итак, какую технологию выбрать для рисования, холст, svg и div. Моя бизнес-сцена рисует не так много точек, а на холсте очень сложно обрабатывать события. В конце концов, в svg есть элементы DOM, и я могу напрямую позаимствовать antd, чтобы сделать некоторые эффекты наведения. В конце концов я выбрал svg. (Вообще-то я раньше не рисовала, так что надо всему научиться~)
список функций
составление графиков
прокручивать вверх и вниз
Бот управляет прокруткой влево и вправо и масштабированием
Узел Hover Показать детали
общий дизайн
Компонентная структура
Конструкция компонентов показана на картинке выше. Диаграмма интегрирована с областью оси Y, что позволяет прокручивать диаграмму вверх и вниз. Так как прокруткой влево-вправо в Windows пользоваться очень сложно, прокрутки в горизонтальном направлении нет, но заданы функции прокрутки и масштабирования роботом.
поток данных
Поток данных компонента очень прост, пользователь передает первоначальную конфигурацию и реальные данные. Большинство компонентов отвечают исключительно за рендеринг, и только бот изменяет положение графика и масштабирование. Тогда диаграмма и ось X будут соответственно отображать соответствующую область.
Структура и поток данных хорошо продуманы, а разработка кода на самом деле очень проста, я не буду вдаваться в подробности, просто посмотрите код на github. Затем идут более мелкие детали.
полировка деталей
Преимущество написания с нуля в том, что некоторые мелкие детали можно более удобно отшлифовать.
проведите пальцем влево по имени
В процессе скольжения имя узла будет отображаться слева.
Ось X не может быть размещена под скрытым
После превышения определенного соотношения частичное отображение оси X скрывается за нечетными и четными числами. На самом деле, вы можете выбрать скрытие, вы также можете повернуть на определенный угол, сделайте это сами, просто установите его~
Роботы встряхивают
антв и роботы ечарт будут трястись, но и в зоне дропа только роботы. Хоть ечарты и оптимизировали анимацию, но она все равно не очень хорошо себя чувствует. Эффект разрезания антв хороший.
Я спроектировал робота в процентах, чтобы скольжение было плавным, а событие добавлялось в документ при скольжении, а перетаскиваемая область становилась всей страницей.
Кодирование выполнено, и детали почти отполированы. Наличие товара уже превышено. Я также получил навыки рисования svg, но то, что откладывается .... Нужно ли другим рисовать точно такую же картинку? Это маловероятно. Подумайте об этом внимательно, повторное использование того, что вы делаете, слишком плохо. Итак, вопрос в том, в чем разница между плохим повторным использованием и белым?
Я очень ценю предложение в «Хакере и художнике»: «Программирование похоже на написание картины маслом. В тот день, когда оно не будет закончено, вы просто перестанете рисовать».
возможность повторного использования
С точки зрения инженерии, повторное использование может быть моментом, который я всегда упускал из виду. Но на самом деле размышления о возможности повторного использования — это не только проверка вашего дизайна и качества кода, но и способные повысить эффективность последующей работы. Это также может развить вашу интуицию, чтобы сталкиваться с проблемами Думая о возможности повторного использования, вы на самом деле думаете об общности проблем. Общими для них являются точки, и чем больше точек, тем единственный способ последовательно соединить вашу структуру знаний в сеть.
Определить сцену
Как улучшить возможность повторного использования? Во-первых, четко определите сценарий бизнес-использования: эта диаграмма предназначена для управления трудоемкими задачами на базовом плане времени, и ее можно сравнить с прошлыми затратами времени. По крайней мере, пусть другие смогут переиспользовать его, когда у них есть такие же потребности, но возможность повторного использования слишком мала, нет.
Вторичное развитие
Стоит ли снижать порог вторичного развития? Если кто-то еще хочет изменить визуализацию диаграммы, должен ли я поддерживать пользовательскую визуализацию? Подумайте об этом внимательно. Поскольку графический рисунок был изменен, он ничем не отличается от перерисовки картинки, ведь техническая сложность тоже очень высока. Чтобы добавить эту гибкость, было бы слишком сложно добавлять компоненты, и определенно нехорошо решать, где открывать чертеж. Ведь гибкость и сложность прямо пропорциональны. Плата за некоторую гибкость — серьезный компромисс. Такие вещи, как вторичная разработка, лучше оставить antV.
абстрактная общая способность
Что делать тогда? Давайте посмотрим, сможем ли мы абстрагировать повторно используемые части с некоторой сложностью. Возвращаясь ко всему дизайну, наиболее полезным компонентом является бот. То есть положение красного пунктирного прямоугольника на рисунке ниже:
Причина для совместного использования тоже очень хорошая.Ведь факт, что перетаскивание влево и вправо в винде неудобно.Это нормальная возможность сопоставить график с роботом, а ечарты и антв, робота нет предоставляется отдельно.
Чтобы понять, это не сложно сделать. Потратьте некоторое время, чтобы очистить бизнес-логику бота. Введите все зависимости в качестве параметров. Затем определите внешний интерфейс и подумайте, как снизить порог для пользователей. Этот процесс действительно может улучшить качество вашего кода. Вы будете жаловаться на то, почему вы не разделили их, когда впервые написали это. Возможно, лучше не абстрагироваться после завершения, а понять, что это общая возможность на этапе проектирования, и отделить ее на уровне проектирования.
Я также извлек определенного бота в компонент, как его использовать, можно посмотреть в демо, которое я написал на github. Я нарисовал несколько декораторов и компонент и чувствую, что больше не могу рисовать. Если у вас есть хорошая идея их объединить, дайте мне знать.
Суммировать
В статье в основном рассказывается, как нарисовать пользовательскую диаграмму вручную и как улучшить повторное использование компонентов в этом процессе, чтобы ускорить общие возможности. Это больше касается обмена перспективами, которые следует учитывать при построении бизнес-компонентов.Рекомендуется всем развивать такую привычку. Ведь привыкать к таким вещам страшно, можно сначала какие-то привычки выработать, а потом ждать, когда привычки подтолкнут. Наконец, введите кодовый адрес,Адрес диаграммыа такжеадрес бота.
Если вам интересна наша команда, вы можете подписаться на рубрику и подписатьсяgithubИли отправьте свое резюме на 'tao.qit####alibaba-inc.com'.replace('####', '@'), люди с высокими идеалами могут присоединиться~
