# Навыки агента визуализации диаграмм > Преобразуйте сложные наборы данных в интуитивно понятные визуальные диаграммы с помощью навыков визуализации АнтВ, предлагающих более 26 типов диаграмм и генерацию на основе ИИ. Начните создавать впечатляющие истории данных без усилий. - Canonical: https://nanoskill.ai/ru/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/ru/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: ru - Source type: github - Popularity signal: 523 ## Sources - https://github.com/antvis/chart-visualization-skills ## Install ```shell npx skills add https://github.com/antvis/chart-visualization-skills ``` ## About Навыки визуализации АнтВ предлагают профессиональный набор решений для визуализации, предназначенных для эффективного и точного преобразования сложных наборов данных в интуитивно понятные визуальные диаграммы. Инициированный Группой Ант, этот набор навыков позволяет пользователям пройти весь рабочий процесс от проектирования диаграмм и интерактивного исследования до углубленного анализа данных, значительно снижая порог создания благодаря интеллектуальным спецификациям дизайна и богатой библиотеке компонентов. Он обеспечивает надежную поддержку для повседневной отчетности, динамических информационных панелей и сложного интерактивного анализа, делая данные видимыми и понятными. В набор входят специализированные навыки, такие как "визуализация-диаграмм" для генерации более 26 типов диаграмм, "создатель-инфографики" для преобразования текста в увлекательные визуальные инфографики с более чем 50 шаблонами и "визуализация-повествовательного-текста" для преобразования неструктурированных данных в семантически насыщенные отчеты с использованием Синтаксиса T8. Эти возможности дополнительно усиливаются интеграцией ИИ, оптимизируя и автоматизируя генерацию и оптимизацию визуализаций, позволяя аналитикам больше сосредоточиться на выявлении инсайтов и принятии бизнес-решений. Разработчики также могут использовать специализированные навыки, такие как "антв-s2-эксперт" для многомерных таблиц перекрестного анализа, "антв-g6-граф" для генерации визуализаций графов G6 v5 и "антв-g2-диаграмма" для создания статистических диаграмм G2 v5. Эти инструменты предоставляют точный, исполняемый код, следующий лучшим практикам, охватывающий основные функциональные возможности, различные алгоритмы компоновки, типы компонентов и взаимодействия. Навыки могут быть интегрированы в проекты Node.js через CLI или API, предлагая гибкость для различных потребностей разработки. ## Key features - **Комплексное создание диаграмм**: Доступ к более чем 26 интеллектуальным типам диаграмм для разнообразных потребностей визуализации данных, включая временные ряды, сравнения, отношения и географические данные. - **Создание инфографики на базе ИИ**: Создавайте красивую инфографику из текстового контента с помощью более 50 шаблонов, преобразуя информацию в воспринимаемый визуальный язык с интуитивно понятными символами. - **Структурированные визуализации нарративного текста**: Преобразуйте неструктурированные данные в семантически насыщенные нарративные отчеты с использованием синтаксиса T8 — языка, похожего на Markdown, для нарративов данных с аннотациями сущностей и мини-диаграммами. - **Многомерные перекрестные таблицы анализа**: Используйте AntV S2 Эксперт для разработки сводных таблиц, листов таблиц и настраиваемых ячеек, предлагая всестороннее руководство по многомерному анализу данных. - **Продвинутая генерация графов и статистических диаграмм**: Генерируйте точный код графов G6 для сетевых, древовидных и блок-схем, а также код диаграмм G2 для статистических визуализаций, таких как столбчатые, линейные и круговые диаграммы, следуя лучшим практикам. ## Use cases - **Создание ежедневных отчетов и динамических панелей мониторинга**: Быстро преобразуйте сложные наборы данных в интуитивно понятные визуальные диаграммы для ежедневной отчетности и динамических панелей мониторинга, обеспечивая эффективное принятие решений на основе данных. - **Разработка сложных интерактивных инструментов анализа**: Используйте надежный инструментарий AntV для создания продвинутых интерактивных приложений анализа, предоставляющих возможности глубокого исследования и визуализации данных. - **Генерация оптимизированных ИИ визуализаций**: Оптимизируйте и автоматизируйте создание и оптимизацию визуализаций данных с помощью интегрированных возможностей ИИ, позволяя аналитикам сосредоточиться на выводах. - **Преобразование данных в привлекательную инфографику**: Преобразуйте данные, информацию и знания в визуально привлекательную инфографику, используя разнообразные шаблоны, чтобы четко и запоминающе передавать сложные идеи. ## Result preview Изучите профессиональный отчет по визуализации данных на основе ИИ, созданный с помощью этого навыка. ![A chart visualizing 'Salary Distribution by Department' using box plots for Engineering, Design, Marketing, Sales, and Support. Each box plot shows median, interquartile ranges, whiskers, and outliers, with distinct color coding for each department. The chart clearly conveys salary spread and variability across departments.](https://file.nanoskill.ai/chart-outcome-1.png) ![A line chart titled 'Cumulative Growth Trajectory' showing growth over quarters from Q1 23 to Q4 24. Data points are labeled with numerical values and connected by a green line, with a shaded area beneath to highlight cumulative increase. The chart demonstrates steady upward growth from 1,200 to 6,100.](https://file.nanoskill.ai/chart-outcome-2.png) ![A composite image containing two data visualizations. The upper chart is a scatter plot titled 'Investment vs Performance' comparing investment amounts to performance scores for three groups, represented by color-coded circular markers of varying sizes. The lower chart is a bubble chart titled 'GDP vs Life Expectancy' showing GDP per capita versus life expectancy for countries including Japan, Sweden, USA, Germany, China, Brazil, India, and Kenya. Each country is represented by a colored bubble sized by an additional variable, highlighting global economic and health disparities.](https://file.nanoskill.ai/chart-outcome-3.png) ## Result walkthrough ### Установить Добавьте навык визуализации диаграмм АнтВ в своего ИИ-агента. ![A screenshot of an AI assistant terminal showing the installation of the AntV chart-visualization-skills package. The assistant logs the execution of the command to add the skills repository via 'npx skills add', confirms interactive selection with the '--yes' flag, and lists all 9 installed skills including chart generation, graph visualization, multi-dimensional tables, editing engines, infographics, narrative visualizations, and skill maintenance. The log notes symlinking into Hermes Agent and a security assessment showing low/medium risk with nothing critical.](https://file.nanoskill.ai/chart-visualization-install.png) ### Опишите Опишите тематическую область, которую вы хотите визуализировать, включая цели, целевую аудиторию и предпочтительные типы или стили диаграмм. ![A screenshot of an AI assistant task panel for creating a comprehensive AntV chart visualization package. The instructions specify generating multiple chart types, infographics from textual data with templates, and narrative-style reports. Emphasis is on a clean, modern, professional style, ensuring readability, hierarchy, interactivity, dynamic dashboards, drill-down exploration, cross-analysis, and production-ready code snippets for Node.js integration. The final output should be a structured PDF or interactive dashboard, balancing aesthetic elegance with functional clarity.](https://file.nanoskill.ai/chart-visualization-task.png) ### Оптимизируйте визуализации Навык генерирует диаграммы и информационные панели, оптимизированные для ясности, компоновки и получения инсайтов. ![A screenshot showing the AI assistant output after loading AntV visualization skills and preparing a professional PowerPoint deck. The assistant indicates understanding of all AntV visualization tools and plans to build a data visualization showcase featuring real data across multiple chart types, infographics, narrative visualizations, network graphs, and S2 tables, ready for presentation in PPT format.](https://file.nanoskill.ai/chart-visualization-outcome.png) ## Skill definition # Навыки визуализации диаграмм Превращение данных в визуальный язык для лучшего мышления. ## Обзор В эпоху принятия решений на основе данных эффективная и точная визуализация и анализ данных имеют первостепенное значение. AntV предлагает профессиональный набор решений для визуализации, предоставляющий надежный инструментарий и всесторонний набор навыков для всего рабочего процесса — от проектирования диаграмм и интерактивного исследования до углубленного анализа данных. Он позволяет пользователям быстро преобразовывать сложные наборы данных в интуитивно понятные визуальные диаграммы, значительно снижая порог создания благодаря интеллектуальным дизайн-спецификациям и богатой библиотеке компонентов. Будь то ежедневная отчетность, динамические информационные панели или сложный интерактивный анализ, AntV обеспечивает надежную поддержку. Интегрируя возможности ИИ, эти инструменты дополнительно упрощают и автоматизируют генерацию и оптимизацию визуализаций. Это позволяет аналитикам больше сосредоточиться на выявлении инсайтов и принятии бизнес-решений, действительно делая данные видимыми и понятными. > [!WARNING] > Этот проект только объединяет код, сгенерированный ИИ. > > **Как внести вклад:** > 1. Отправьте issue, четко описывающий проблему > 2. Назначьте его @copilot с вашими требованиями ## Использование Добавьте этот маркетплейс в Claude Code: ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Или вы можете напрямую установить навыки для ваших агентов: ```bash npx skills add antvis/chart-visualization-skills ``` ## Доступные навыки - 📊 **chart-visualization**: Комплексный навык создания диаграмм на базе AntV, предоставляющий более 26 типов диаграмм для интеллектуальной визуализации данных. `Chart Visualization` интеллектуально выбирает наиболее подходящий тип диаграммы из более чем 26 доступных вариантов, извлекает параметры на основе детальных спецификаций и генерирует высококачественные изображения диаграмм. Он охватывает временные ряды, сравнения, часть-целое, отношения, географические, иерархические, статистические и специализированные визуализации. - 🎨 **infographic-creator**: Создание красивых инфографик на основе заданного текстового контента. Используйте, когда пользователи просят создать инфографику. `Infographic Creator` использует AntV Infographic для преобразования данных, информации и знаний в воспринимаемый визуальный язык. Он объединяет визуальный дизайн с визуализацией данных, предоставляя более 50 шаблонов, включая списки, последовательности, иерархии, сравнения, отношения и диаграммы. Он сжимает сложную информацию с помощью интуитивно понятных символов, помогая аудитории быстро понять и запомнить ключевые моменты. - 🖼️ **icon-retrieval**: Поиск и извлечение SVG-строк иконок из библиотеки иконок. По умолчанию возвращает до 5 подходящих иконок (настраивается). `Icon Search` помогает пользователям находить подходящие иконки для различных случаев использования, включая инфографику, веб-разработку, дизайн и многое другое. Поиск по ключевым словам для обнаружения доступных иконок и прямого извлечения их SVG-строк. Каждый поиск возвращает до 5 подходящих иконок по умолчанию (настраивается через параметр topK) с их URL-адресами и полным SVG-содержимым. - 📝 **narrative-text-visualization**: Генерация структурированных визуализаций повествовательного текста из данных с использованием синтаксиса T8. `Narrative Text Visualization` (T8) преобразует неструктурированные данные в семантически насыщенные повествовательные отчеты с использованием синтаксиса T8 — декларативного языка, подобного Markdown, для создания повествований о данных с аннотациями сущностей. Он дружественен к LLM и не зависит от фреймворков, бесшовно работая с HTML, React и Vue. Идеально подходит для создания отчетов по анализу данных, резюме и документов с инсайтами, где сущности, такие как метрики, значения, тренды и измерения, правильно размечены. Возможности включают встроенные мини-диаграммы, стандартизированное оформление и профессиональное форматирование. Поддерживает аутентичные источники данных и обеспечивает легковесный, технологически-агностический рендеринг. - 📋 **antv-s2-expert**: Ассистент по разработке многомерных кросс-аналитических таблиц S2. Используйте, когда пользователям нужна помощь с сводными таблицами S2, листами таблиц или любой разработкой, связанной с @antv/s2. `AntV S2 Expert` помогает пользователям разрабатывать с помощью движка многомерных кросс-аналитических таблиц S2. Он предоставляет всестороннее руководство по основному движку `@antv/s2`, привязкам к фреймворкам `@antv/s2-react` и `@antv/s2-vue`, компонентам расширенного анализа `@antv/s2-react-components` и серверному рендерингу `@antv/s2-ssr`. Охватывает сводные таблицы, листы таблиц, пользовательские ячейки, темизацию, события, взаимодействия, сортировку, итоги, всплывающие подсказки, закрепленные строки/столбцы, иконки, пагинацию и многое другое. - 🕸️ **antv-g6-graph**: Генератор кода визуализации графов G6 v5. Используйте, когда пользователям необходимо генерировать графы G6 — сетевые графы, древовидные графы, блок-схемы, ментальные карты и любые визуализации данных с реляционной или графовой структурой с помощью библиотеки G6. `AntV G6 Graph` генерирует точный, исполняемый код G6 v5, следуя лучшим практикам. Он охватывает инициализацию основного графа, структуры данных (узлы, ребра, комбо), более 10 алгоритмов раскладки (force, dagre, circular, grid, mindmap, fishbone и т.д.), все встроенные типы узлов/ребер/комбо, управление состоянием, более 15 поведений (drag-canvas, zoom-canvas, click-select, lasso и т.д.), более 10 плагинов (minimap, tooltip, toolbar, legend, timebar и т.д.), разработку пользовательских элементов, трансформации и анимацию. Встроенные защитные механизмы предотвращают распространенные ошибки миграции с v4 на v5, такие как использование устаревших конструкторов `G6.Graph()`, API `graph.data()` или конфигурации поведения на основе Mode. - 📈 **antv-g2-chart**: Генератор кода диаграмм G2 v5. Используйте, когда пользователям необходимо генерировать диаграммы G2 — столбчатые диаграммы, линейные диаграммы, круговые диаграммы, точечные диаграммы, площадные диаграммы, тепловые карты и любые визуализации статистических данных с помощью библиотеки G2. `AntV G2 Chart` генерирует точный, исполняемый код G2 v5, следуя лучшим практикам Spec Mode. Он охватывает более 30 типов диаграмм (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge и другие), преобразования данных (stackY, dodgeX, binX, fold и т.д.), системы координат (cartesian, polar, theta, radial), масштабы, взаимодействия (brush, slider, legend filter), компоненты (axis, legend, tooltip, annotation) и многовидовые композиции. Встроенные защитные механизмы предотвращают распространенные ошибки миграции с v4 на v5, такие как использование устаревших цепочечных API, недопустимых названий палитр или ссылки на `d3` в пользовательском коде. **Результаты оценки** Подход Harness Engineering был тщательно протестирован на 174 тестовых случаях генерации диаграмм, демонстрируя значительные улучшения по сравнению с базовыми методами: | **Модель** | **G2** | **G6** | | :---: | :---: | :---: | | qwen3-coder-480b-a35b-instruct | ✨ 98.2% +17.7% | 94.8% +15.6% | | Kimi-K2.5 | 97.7% +17.2% | 96.9% +17.7% | | GLM-5.1 | 93.6% +13.1% | 92.8% +13.6% | | DeepSeek-V3.2 | 90.8% +10.3% | ✨ 97.9% +18.7% | | Context7 Базовый уровень | 80.5% | 79.2% | Результаты показывают, что Harness Engineering позволяет LLM достигать точности, близкой к производственной (до 98,2%), значительно превосходя базовый подход Context7. > [!TIP] > Скоро появятся новые навыки. ## Использование библиотеки Её можно использовать как библиотеку в ваших проектах Node.js с `CLI` и `API`. ### Использование CLI Мы также предоставляем инструмент CLI под названием `antv` для удобного использования в вашем терминале, установите глобально: ```bash npm install -g @antv/chart-visualization-skills ``` **Поиск или перечисление навыков по запросу**: ```bash # Поиск навыков по запросу (только метаданные) antv retrieve "bar chart" --library g2 --topk 10 # Поиск навыков с полным содержимым markdown (основные ограничения автоматически добавляются в начало) antv retrieve "bar chart" --library g2 --content # Поиск навыков и вывод в формате JSON antv retrieve "bar chart" --library g2 --output json # Получить навык по его точному ID antv get g2-mark-interval-basic --library g2 # Перечислить все доступные навыки antv list --library g2 --category core # Перечислить навыки и вывести в формате JSON antv list --output json # Показать информацию о навыке (основные ограничения из SKILL.md) antv info --library g2 # Показать информацию о навыке в формате JSON antv info --library g2 --output json ``` **Использование для команды**: ``` Использование: antv [параметры] [команда] Инструмент CLI для поиска навыков визуализации диаграмм AntV Параметры: -V, --version вывести номер версии -h, --help показать справку по команде Команды: retrieve [параметры] <запрос> Поиск навыков, соответствующих запросу get [параметры] Получить навык по его точному ID list [параметры] Перечислить все доступные навыки info [параметры] Показать информацию о навыке из SKILL.md help [команда] показать справку по команде Параметры для retrieve: --library <библиотека> Фильтр по библиотеке (например, g2, g6) --topk Количество возвращаемых результатов (по умолчанию: 7) --content Включить тело содержимого markdown в результаты; основные ограничения (разделы 1-2 SKILL.md) всегда добавляются в начало как первый результат --output <формат> Формат вывода: json | text (по умолчанию: "text") ``` > Примечание: `--content` всегда добавляет основные ограничения библиотеки (разделы 1 и 2 SKILL.md, до маркера ``) как первый результат, гарантируя, что модель получит основные правила вместе с справочными документами. ### Использование API ```typescript import { retrieve } from '@antv/chart-visualization-skills'; // Только метаданные (без содержимого) const skills = retrieve('bar chart', { library: 'g2', topK: 5 }); // С полным содержимым markdown (основные ограничения автоматически добавляются в начало как первый результат) const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true }); // С содержимым, но без основных ограничений const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false }); ``` ```typescript retrieve(query: string, options?: RetrieveOptions): Skill[] interface RetrieveOptions { library?: string; // Фильтр библиотеки, например 'g2' или 'g6' topK?: number; // Количество результатов (по умолчанию: 7) content?: boolean; // Включить тело содержимого markdown (по умолчанию: false) includeInfo?: boolean; // Добавить в начало основные ограничения из SKILL.md (по умолчанию: как у content) } ``` | Параметр | Тип | По умолчанию | Описание | | :--- | :--- | :--- | :--- | | `library` | `string` | all | Фильтр библиотеки (`g2` или `g6`) | | `topK` | `number` | `7` | Количество результатов | | `content` | `boolean` | `false` | Включить тело содержимого markdown | | `includeInfo` | `boolean` | как у `content` | Добавить в начало основные ограничения из SKILL.md (разделы 1-2) как первый результат | > Примечания: > - По умолчанию поиск возвращает легковесные объекты результатов без поля `content`. > - `content: true` возвращает тело содержимого markdown (метаданные frontmatter исключаются). > - Когда `includeInfo` равно true (по умолчанию, когда `content: true`), блок основных ограничений — SKILL.md до `` — вставляется как первый элемент (id с префиксом `__info__`), гарантируя, что модель всегда видит основные правила. ```typescript import { info } from '@antv/chart-visualization-skills'; const skillInfo = info('g2'); // => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' } ``` ```typescript info(library?: string): SkillInfo | undefined interface SkillInfo { name: string; description: string; content: string; // Полное тело SKILL.md (после frontmatter) constraintsContent: string; // Тело SKILL.md до маркера ; вставляется при retrieve, когда includeInfo: true } ``` | Параметр | Тип | По умолчанию | Описание | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Библиотека, для которой нужно получить информацию (`g2` или `g6`) | ## Лицензия Лицензия MIT - см. файл [LICENSE](LICENSE) для подробностей. ## FAQ ### Что такое навыки визуализации диаграмм AntV? Навыки визуализации диаграмм AntV — это набор инструментов и возможностей на базе AntV, предназначенных для эффективной и точной визуализации и анализа данных. Они включают функции создания диаграмм, инфографики, визуализации нарративного текста, а также разработки специализированных графов и статистических диаграмм. ### Сколько типов диаграмм поддерживает навык визуализации диаграмм? Навык визуализации диаграмм предоставляет более 26 типов диаграмм для интеллектуальной визуализации данных, охватывающих широкий спектр представлений данных, включая временные ряды, сравнения, отношения и географические данные. ### Могу ли я создавать инфографику с помощью этих навыков? Да, навык создания инфографики позволяет создавать красивую инфографику на основе предоставленного текстового контента. Он использует AntV Infographic и предлагает более 50 шаблонов для преобразования данных в воспринимаемый визуальный язык. ### Что такое визуализация нарративного текста (синтаксис T8)? Визуализация нарративного текста (T8) преобразует неструктурированные данные в семантически насыщенные нарративные отчеты с использованием синтаксиса T8, декларативного языка, похожего на Markdown. Он предназначен для создания нарративов данных с аннотациями сущностей, мини-диаграммами и профессиональным форматированием, подходящим для аналитических отчетов и документов с выводами. ### Как навыки визуализации диаграмм AntV помогают в многомерном анализе? Навык antv-s2-expert выступает в роли помощника разработчика для механизма многомерных перекрестных таблиц анализа S2. Он предоставляет всестороннее руководство по работе со сводными таблицами, листами таблиц, настраиваемыми ячейками и другими функциями @antv/s2. ### Существуют ли инструменты для создания специфических графовых и статистических диаграмм? Да, навык antv-g6-graph генерирует код G6 v5 для визуализаций графов, таких как сетевые графы, деревья и блок-схемы. Навык antv-g2-chart генерирует код G2 v5 для статистических диаграмм, таких как столбчатые диаграммы, линейные графики, круговые диаграммы и точечные диаграммы, следуя лучшим практикам.