Предыдущая статья продолжается, и книга продолжается:Глаза открыты! Али использует такие компоненты для разработки больших экранов (1)
Привет~ Я являюсь учеником внешнего интерфейса Фэн, и сегодня я продолжу делиться с вами серией статей по визуализации, представляющих нашу библиотеку диаграмм с открытым исходным кодом для внешнего интерфейса 📈 CloudCharts (Github приглашает попробовать &Выпуск&PR) Как решить проблемы, возникающие в крупномасштабных сценариях использования на основе упаковки G2, и может рисовать диаграммы с несколькими элементами конфигурации, обслуживающими почти 200 внутренних продуктов и множество внешних облачных продуктов. Заинтересованные студенты могут зайти на официальный сайт, чтобы испытать онлайн:портал
Этот выпуск является вторым в серии, посвященной ответу на третий вопрос:Как это сделать из коробки и снизить порог использования?✨
Зачем делать это из коробки?
Почему вы хотите его запаковать?Разве не хорошо использовать G2 напрямую?
AntV G2 — это набор основанных на данных синтаксиса визуальной графики с высоким уровнем взаимодействия для обычных статистических диаграмм с высокой степенью простоты использования и расширяемости.
Функции G2 очень мощные, но новичкам слишком дорого изучать синтаксис графики с нуля и понимать профессиональные концепции визуализации, такие как «визуальный канал» и «отображение данных». Прямое использование G2 сложно поддерживать быстрое развитие бизнеса, а стоимость визуальной стыковки делает дизайнеров лысыми, поэтому мы решили сделать готовую упаковку, чтобы снизить стоимость использования для всех.
Идеи решения
1. Конфигурация
Поскольку синтаксис графики сложен для изучения, превратите его в простой элемент конфигурации и завершите диаграмму, передав конфигурацию компоненту React.
2. Расширение функций
В реальном использовании в G2 отсутствуют некоторые общие функциональные точки, и его нельзя использовать немедленно. Мы добавили часто используемые функции, чтобы уменьшить сложность использования.
3. Интеллектуальный
Чем больше функций, тем сложнее конфигурация.Мы пытаемся использовать некоторую интеллектуальную конфигурацию, чтобы уменьшить сложность написания элементов конфигурации для пользователей.
1. Конфигурация
Мы добавили функцию «переводчик» в библиотеку компонентов для преобразования элементов конфигурации, переданных пользователем, в графический синтаксис. Переводчик будет соответствовать разделу грамматики графа G2.
Давайте сначала посмотрим, из каких частей состоит графическая грамматика G2:
- Конфигурация верхнего уровня ✅
- Шкала показателей данных
- Система координат Круд
- Координатная ось ✅
- Подсказка ✅
- Легенда Легенда ✅
- Вспомогательное руководство по маркировке ✅
- Графический элемент Геом
- Текстовая этикетка Этикетка ✅
Часть ✅ логически непротиворечива на большинстве диаграмм и может быть абстрагирована в единую функцию:
// 设置X轴
xAxis(this, chart, config);
// 设置Y轴
yAxis(this, chart, config);
// 设置图例
legend(this, chart, config);
// 设置tooltip
tooltip(this, chart, config);
// 设置辅助线，辅助背景区域
guide(this, chart, config);
Например, внутри функции xAxis оберните логику синтаксиса графики, связанную с осью X:
if (config.xAxis === false) {
// 关闭 X 轴
chart.axis('x', false);
return;
}
const { alias, autoRotate, labelFormatter } = config.xAxis || {};
const xAxisConfig = {
title: null,
label: {
autoRotate,
formatter: labelFormatter,
},
};
// 开启坐标轴标题
if (alias) {
xAxisConfig.title = {
position: 'center',
offset: 38,
textStyle: {
rotate: 0,
},
};
}
chart.axis('x', xAxisConfig);
Комбинируя различные функции «переводчика», мы можем легко поддерживать библиотеку диаграмм, и пользователям нужно всего лишь передать несколько элементов конфигурации, чтобы завершить рисование диаграммы.
2. Расширение функций
Мы также добавили в переводчик множество функций и исправили некоторые ошибки, чтобы упростить его использование:
Автоматически адаптироваться к размеру
G2 по умолчанию адаптируется только к ширине, мы добавили адаптацию к высоте, чтобы автоматически считывать высоту внешнего элемента.
Автоматически реагировать на обновления данных
Входящие обновления данных из реквизита автоматически обновляют данные.
Автоматически реагировать на обновления конфигурации
Обновления элементов конфигурации, переданных реквизитами, автоматически обновят график.
крах легенды
Чрезмерное количество элементов легенды будет сжимать пространство отображения диаграммы Мы добавили функцию сворачивания легенды, которая может свернуть слишком много легенд для обеспечения эффекта отображения.
Карта нарисована в масштабе
При использовании G2 для рисования карты графика будет заполнять холст и вызывать деформацию Мы используем некоторые алгоритмы, чтобы гарантировать, что графика может быть отрисована в «правильном» размере. Для конкретного кода, пожалуйста, обратитесь ко мне в этом выпускеantvis/G2#1364Ответить в .
Масштабирование CSS не влияет на позиционирование всплывающей подсказки
Мы применили масштабирование CSS к диаграмме на некоторых больших экранах и обнаружили, что после масштабирования всплывающая подсказка диаграммы будет смещена. Из-за плана разработки это не могло быть исправлено PR, и мы решили эту проблему через АОП. Для конкретного кода, пожалуйста, обратитесь ко мне в этом выпускеantvis/G2#912Ответить в .
3. Интеллектуальный
По мере того, как мы упаковываем все больше и больше функций, соответствующая конфигурация будет становиться все более и более сложной и постепенно превращаться в новый «графический синтаксис». Мы пытаемся добавить некоторые интеллектуальные конфигурации, чтобы пользователи могли заменить сложные конфигурации простыми элементами конфигурации и рассчитать соответствующие элементы конфигурации в соответствии с текущим контекстом внутри диаграммы:
Автоматически вычислять формат времени
Мы обнаружили, что настройки формата времени у многих пользователей были необоснованными, поэтому мы добавили эту функцию. Если пользователь не указывает формат, диапазон времени и интервал времени в данных считываются внутренним образом, и вычисляется более подходящий формат времени.
| интервал \ интервал | более одного месяца | больше одного дня | более часа | больше минуты |
|---|---|---|---|---|
| более одного месяца | YYYY-MM | - | - | - |
| более одного дня | MM-DD | MM-DD | - | - |
| более часа | MM-DD HH:mm | MM-DD HH:mm | HH:mm | - |
| больше минуты | MM-DD HH:mm | MM-DD HH:mm | HH:mm | HH:mm |
Слишком много легенд автоматически свернуты
Функция складывания легенды упоминалась ранее, но мы можем пойти дальше и позволить диаграмме автоматически включать функцию отображения складывания, когда легенда занимает определенную высоту.
// 自动适配图例折叠高度
const chartHeight = '图表高度';
const legendHeight = '图例总体高度';
const itemHeight = '图例单行高度';
// 行数最多占图表高度的三分之一，最小为2。
const collapseRow = Math.max(2, Math.round((chartHeight / itemHeight) / 3));
// 开启图例折叠
if (legendHeight > itemHeight * collapseRow) {...}
Разделительная линия в перерыве
После описанной выше инкапсуляции библиотека диаграмм стала намного проще в использовании, и большинство пользователей могут завершить рисунок, опираясь на документацию и примеры. Наша цель почти достигнута
Из-за ограниченного места этот выпуск здесь, до встречи в следующем выпуске!
📢 📢 Что вы думаете по этому поводу? Добро пожаловать в комментарии~
✏️ Следующее уведомление
Ответьте на оставшиеся два вопроса и сосредоточьтесь на том, как обеспечить качество отображения графика и соединиться с восходящим и нисходящим потоком, чтобы сформировать полную визуальную операционную связь.
4. Как совместить тему отображения графика и быстро переключить тему?
5. Как строить графики с низким кодом?
Не забудьте подписаться на нас~