AntV G2 Chartавтор antvis

AntV G2 Chart Skill.

Осознанно используйте грамматику G2 v5, а не смешивайте синтаксис из других библиотек диаграмм.

Data Visualization
Диаграммы
JavaScript

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · AntV G2 ChartSKILL.md

Задача Data Visualization Результат • Полная спецификация диаграммы G2 v5 с настройкой контейнера и рендеринга. • Исправленный выбор марок, кодирований, трансформаций и композиции. • Проверка подписей, семантики цвета, подсказок и смысла данных с учётом конкретной диаграммы. Перед началом Требуется @antv/g2 v5 или описанный в документации браузерный бандл. Для необязательного получения справочных материалов используется внешний контекстный сервис AntV.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Пишите диаграммы в режиме спецификаций G2 v5

Руководство по реализации G2 v5: декларативные правила спецификаций, точечное получение справочных материалов, предотвращение типичных ошибок и выбор визуальных решений с учётом данных.

Рабочий процесс на основе источникаНе тест производительности выполнения

Рабочий подход

AntV G2 Chart сосредоточен на реализации диаграмм с @antv/g2 v5. Сгенерированные примеры он начинает с полной декларативной спецификации и учитывает типичные проблемы: отсутствие контейнера, неверные названия марок, свойства подписей в единственном числе и неуместные трансформации. Кроме того, он предоставляет конечную точку получения документации по отдельным концепциям и примерам G2.

Источник особенно ясно описывает композицию нескольких марок: линия и точки должны находиться в children представления (view), а не получаться повторной сменой типа корня. В визуальных рекомендациях различаются настройки движка по умолчанию и переопределения, выбранные в навыке; единицы, подписи источников и заголовки следует добавлять, только когда известен их смысл. Это не универсальный инструмент AntV для графов, редакторов диаграмм или сводных таблиц.

Ожидаемые результаты

Полная спецификация диаграммы G2 v5 с настройкой контейнера и рендеринга.
Исправленный выбор марок, кодирований, трансформаций и композиции.
Проверка подписей, семантики цвета, подсказок и смысла данных с учётом конкретной диаграммы.

Посмотреть пример задания

От задания до проверки

01
Изучите данные и цель
Определите поля, единицы, потребности сравнения и вопрос диаграммы, не придумывая недостающую семантику.
02
Получите нужный справочный материал
Используйте описанный сервис получения справки G2, когда нужно уточнить детали API или типа диаграммы.
03
Соберите полную спецификацию
Выбирайте допустимые марки и каналы, используйте массивы трансформаций и компонуйте наложения внутри представления.
04
Отрендерите и проверьте
Проверьте реальные марки, подписи, легенды, темы и поведение при плотных данных в целевом контейнере.

02 Когда использовать

Когда использовать

Требуется @antv/g2 v5 или описанный в документации браузерный бандл. Для необязательного получения справочных материалов используется внешний контекстный сервис AntV.

Хорошо подходит

Реализация на G2 v5Полезен для создания диаграмм в декларативном стиле спецификаций библиотеки.
Миграция и отладкаПомогает выявить синтаксис, скопированный из старых версий G2 или других грамматик визуализации.
Диаграммы с несколькими маркамиПоясняет, как следует компоновать независимые наложения.

Что учесть

Не любая библиотека AntVСети G6, диаграммы X6 и сводные таблицы S2 выходят за заявленные рамки.
Рендеринг не заменяет проверку данныхКорректный рендеринг не доказывает, что данные, агрегация или интерпретация верны.
Для справки нужен доступ к сетиОписанная конечная точка получения справки — внешний сервис, доступность которого нужно проверять при использовании.

Что подготовить

Набор данных и значение полейУкажите реальные значения, типы, единицы и допустимую агрегацию.
Вопрос визуализацииОбъясните, что диаграмма должна сравнивать или показывать.
Контекст выполненияУкажите версию G2, контейнер, тему и требования к интерактивности.

03 Важные решения

Важные решения

Полные исходные спецификации
Полную спецификацию проще анализировать, чем последовательность частичных изменений корня.
Семантический цвет
Цвет должен кодировать значимую группу или статус, а не добавлять радугу в сравнение одной серии.
Значения по умолчанию и переопределения различаются
Источник отличает выбранные значения радиуса, ширины и прозрачности от поведения движка, которое они переопределяют.

04 Пример задания

Попробуйте целевое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Установите навык через поддерживаемый путь репозитория и при необходимости добавьте @antv/g2 в целевое приложение. Пакет диаграмм и навык агента — отдельные зависимости.

Исходный файл в апстриме

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используйте antv-g2-chart, чтобы построить диаграмму G2 v5 по предоставленным данным о ежемесячной выручке. Наложите линию и точки с помощью view и children, сохраните указанные денежные единицы и используйте полную исходную спецификацию с явным контейнером и вызовом render. Избегайте лишних цветовых легенд и проверьте плотные подписи, прежде чем добавлять их.

Проверьте результат

Сверьте фактический результат со следующими наблюдаемыми критериями.

У диаграммы есть явный контейнер и вызов render.
Наложенные марки скомпонованы как независимые children представления.
Подписи, единицы и кодирование цветом соответствуют смыслу предоставленных данных.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Прочитать краткое руководство

05 Источник и лицензия

Источник и лицензия

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

Владелец источника: antvis
Репозиторий: antvis/chart-visualization-skills
Файл навыка: skills/antv-g2-chart/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · a105fa12a9fa

Редакционное резюме источника

Руководство по реализации G2 v5: декларативные правила спецификаций, точечное получение справочных материалов, предотвращение типичных ошибок и выбор визуальных решений с учётом данных.

Оригинальное резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Можно ли накладывать марки, дважды меняя тип корня?

Источник говорит, что нет: так обновляется корневая марка, а не создаются независимые наложения. Используйте view с children.

Охватывает ли он сетевые диаграммы G6?

Нет. Источник прямо исключает из этого навыка по диаграммам G2 задачи G6, X6 и S2.

Являются ли предлагаемые значения стилей настройками G2 по умолчанию?

Не все. Источник отличает рекомендуемые явные переопределения от собственных настроек движка по умолчанию.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в свой процесс проверьте его собственную настройку.

Скачать OpenDesign Просмотреть дизайн-навыки