Об авторе Техническая команда hustcc Ant Financial Data Experience
Многие из инструментов, которые мы разрабатываем и используем, являются инструментами cli, такими как babel, eslint, webpack, jest и другие. В силу своей специфики информационная выразительность консоли заключается только в одном символе.
Диаграмма символов консоли может эффективно улучшить способность визуализации данных, повысить эффективность приема информации и быть более красивой. Например:
/**
* 柱形图
*
* ^
* | A:70
* | +---+
* | | |
* | | | C:50
* | | | +---+
* | | | | |
* | | | B:30 | |
* | | | +---+ | |
* | | | | | | |
* | | | | | | |
* | | | | | | |
* +---+---+----+---+----+---+----->
*
*/
Быстрый Стрелок Быстрый Старт:GitHub.com/proto team/he…
1. Введение
В настоящее время многие консольные приложения, способные делать простую анимацию и цвет, чтобы сделать данные показывать более четкими, красивыми, например:
Выше показан эффект отображения результата одиночного теста простого uri-parse проекта в консоли, что очень красиво и понятно.
Однако для отображения некоторых данных просто украсьте цвет и не может иметь хорошего эффекта, например:
Вышеупомянутый результат — результат выполнения теста с двумя кодами. На самом деле, если это не ограничивается консолью, мы все надеемся, что этот вид результатов теста использует **柱形图** чтобы дать относительное сравнение, которое более интуитивно понятно.
2. Что делать
Что мы будем делать? Понятно, что мы собираемся сделать библиотеку графиков под консоль.
Думая о библиотеке диаграмм, мы должны легко думать о echarts, G2 и т. д., чтобы рабочая среда библиотеки диаграмм находилась в браузере, и мы могли в полной мере использовать холст, SVG и css для создания различных макетов, стилей и спецэффектов.
Сначала поставьте картинку:
Какую графику мы можем сделать для консольных сред? Я, пожалуй, перечислю несколько:
- Table:лист
- Bar: Столбчатая диаграмма
- HBar: Горизонтальная столбчатая диаграмма
- Box: Диаграмма с областями
- DirTree: схема структуры каталогов
Вот несколько примеров приложений, которые я могу придумать.
3. Как это сделать?
В итоге получилась рабочая консольная библиотека графиков, но, вероятно, не идеальная!
соглашение
Для того, чтобы сделать выше несколько консольных графиков и **提高图形的在不同环境控制台的适配能力**. Соглашение:
- Графика рисуется с использованием только основных символов (символы на клавиатуре)
- Не используйте цвета (некоторые консоли не поддерживают цвета, что также упрощает код)
- по имени
tchartsСправа: графики терминалов.
принцип
Сначала приведу пример.Сейчас много людей играет в мобильные игры.Перед тем, как мобильная игра будет выпущена, она будет отправлена в Бюро радио и телевидения для проверки.Одним из пунктов проверки является соответствие одежды персонажи в игре разоблачаются (утечка). Когда игра будет сделана, будет 3D модель существующего персонажа, а затем на персонажа будет навешан слой одежды, это точка зарядки-скин.
Бывает, когда на некоторых персонажей навешивают скин, сделанный артом, т.к.皮肤尺寸小了，或者角色胸太大了, что приводит к наготе, в этом случае игра, скорее всего, не пройдет рецензию!
В этом примере вы действительно можете почувствовать **
图层Концепция ** заключается в том, что рендеринг персонажа в игре будет иметь множество иерархических структур, но то, что видит конечный пользователь, на самом деле является верхним слоем.
Точно так же в макете div HTML, когда структура сложена, иерархия может быть скорректирована с помощью z-индекса, чтобы пользователи не могли видеть разные вещи.
Точно так же библиотека диаграмм браузера также будет иметь концепцию слоев, которые накладываются слой за слоем для формирования графики, которую видит конечный пользователь!
Базовый принцип разработки консольных диаграмм tcharts.js также разделен на разные слои, плюсы:
- Повторное использование слоя легко;
- Легко расширяемые типы диаграмм;
- Код понятнее;
Минус конечно в том что重复绘制.
Например, в верхней столбчатой диаграмме мы можем следовать图层Идею можно разделить на два слоя:
- Ось: координатная ось
- Прямоугольник: прямоугольник
То есть приведенную выше столбчатую диаграмму можно разделить на четыре слоя:
1 层 Axis
^
|
|
|
|
|
|
|
|
|
|
+---+---+----+---+----+---+----->
3 层 Rect
+---+
| |
| |
| |
| |
| |
| |
+---+
Затем его также можно разделить, ось делится на 2 линии, плюс координаты точки; прямоугольник может быть разделен непосредственно на 4 линии.
Таким образом, рекурсивный слой за слоем, окончательная фактическая работа состоит в том, чтобы нарисовать точку в каждой соответствующей точке координат. Когда все точки нарисованы, отображается весь график.
4. tcharts.js
В общем, основной принцип:
Point
|
Line
/ \
Text + Rect Axis
\ / \ |
RectText \ |
\ | |
Bar / HBar / Table / Box
Из Point -> Line -> Surface расширяйте графику слой за слоем, а затем вводите Layer для сборки этих элементов и, наконец, создавайте окончательную графику путем слияния слоев.
Структура диаграммы классов всего проекта tcharts.js показана на следующем рисунке (на самом деле объем кода небольшой, его не должно быть сложно читать!):
В настоящее время экспортируется 4 графика!
Зависимости всего файла кода проекта (сгенерированы с помощью webstorm, некоторые ненужные подключения удалить нельзя):
Код здесь:GitHub.com/proto team/he…. Благодаря причинам времени в настоящее время было завершено только 4 графика, но последующее расширение не должно быть сложно, а код не оптимизирован. Я надеюсь, что все могут принять участие.
Отправьте несколько эффектов (вероятно, некоторые CSS-страницы ниже, в результате чего нет идеально выровненной!):
+--------------+----------------------+---------------------+
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | C:25% | Hello:25% |
| | | |
| | | |
| A:25% | | |
| | | |
| | | |
| +----------------------+---------------------+
| | |
| | |
| | |
| | B:25% |
| | |
| | |
+--------------+--------------------------------------------+
^
|
+---------------+
| D:30|
+---------------+
|
+------------------------------------+
| C:70|
+------------------------------------+
|
+-----------------------+
| B:45|
+-----------------------+
|
+----------------------------------------------------+
| A:100|
+----------------------------------------------------+
|
+----------------------------------------------------->
+----+---------------+--------------------+
| id | name | birthday |
+----+---------------+--------------------+
| #1 | xiaowei | 1992-08-01 |
+----+---------------+--------------------+
| #2 | hello | 1992-09-20 |
+----+---------------+--------------------+
| #3 | tcharts | 2017-06-27 |
+----+---------------+--------------------+
| #4 | world | |
+----+---------------+--------------------+
Студенты, которым интересны tcharts, могут подписаться на колонку или отправить свое резюме на xiaowei.wzw####alibaba-inc.com'.replace('####', '@'). Приветствуются люди с высокими идеалами присоединиться~
Оригинальный адрес:GitHub.com/proto team/no…