ทักษะเอเจนต์การสร้างภาพแผนภูมิ

ทักษะการสร้างภาพข้อมูลด้วยแผนภูมิ

เปลี่ยนข้อมูลให้เป็นภาษาภาพเพื่อช่วยในการคิดวิเคราะห์

ภาพรวม

ในยุคของการตัดสินใจด้วยข้อมูลเป็นหลัก การสร้างภาพข้อมูลและการวิเคราะห์ข้อมูลที่มีประสิทธิภาพและแม่นยำเป็นสิ่งสำคัญยิ่ง AntV นำเสนอชุดโซลูชันการสร้างภาพข้อมูลระดับมืออาชีพ พร้อมด้วยชุดเครื่องมือที่แข็งแกร่งและชุดทักษะที่ครอบคลุมสำหรับกระบวนการทำงานทั้งหมด—ตั้งแต่การออกแบบแผนภูมิ การสำรวจเชิงโต้ตอบ ไปจนถึงการวิเคราะห์ข้อมูลเชิงลึก ช่วยให้ผู้ใช้สามารถเปลี่ยนชุดข้อมูลที่ซับซ้อนให้เป็นแผนภูมิภาพที่เข้าใจง่ายได้อย่างรวดเร็ว ลดอุปสรรคในการสร้างผ่านข้อกำหนดการออกแบบอัจฉริยะและคลังส่วนประกอบที่หลากหลาย ไม่ว่าจะเป็นรายงานประจำวัน แดชบอร์ดแบบไดนามิก หรือการวิเคราะห์เชิงโต้ตอบที่ซับซ้อน AntV มอบการสนับสนุนที่น่าเชื่อถือ ด้วยการผสานความสามารถด้าน AI เครื่องมือเหล่านี้ยังช่วยปรับปรุงและทำให้การสร้างและเพิ่มประสิทธิภาพของภาพเป็นไปโดยอัตโนมัติมากยิ่งขึ้น ช่วยให้นักวิเคราะห์มุ่งเน้นไปที่การค้นพบข้อมูลเชิงลึกและขับเคลื่อนการตัดสินใจทางธุรกิจได้ดียิ่งขึ้น ทำให้ข้อมูลมองเห็นและเข้าใจได้อย่างแท้จริง

[!WARNING] โครงการนี้รวมเฉพาะโค้ดที่สร้างโดย AI

วิธีการมีส่วนร่วม:

1. ส่ง issue โดยอธิบายปัญหาอย่างชัดเจน
2. กำหนดให้ @copilot พร้อมข้อกำหนดของคุณ

การใช้งาน

เพิ่มตลาดนี้ไปยัง Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

หรือคุณสามารถติดตั้งทักษะเหล่านี้สำหรับหลายเอเจนต์ของคุณโดยตรง:

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 Syntax

Narrative Text Visualization (T8) แปลงข้อมูลที่ไม่มีโครงสร้างให้เป็นรายงานบรรยายที่เต็มไปด้วยความหมายโดยใช้ T8 Syntax ซึ่งเป็นภาษาที่มีลักษณะคล้าย Markdown แบบประกาศสำหรับการสร้างการเล่าเรื่องข้อมูลด้วยคำอธิบายประกอบเอนทิตี เป็นมิตรกับ LLM และไม่ขึ้นกับเฟรมเวิร์ก ทำงานร่วมกับ HTML, React, และ Vue ได้อย่างราบรื่น เหมาะสำหรับการสร้างรายงานวิเคราะห์ข้อมูล บทสรุป และเอกสารข้อมูลเชิงลึกที่มีเอนทิตี เช่น เมตริก ค่า แนวโน้ม และมิติที่ติดป้ายกำกับอย่างเหมาะสม คุณสมบัติรวมถึงแผนภูมิขนาดเล็กในตัว การจัดรูปแบบมาตรฐาน และรูปแบบมืออาชีพ รองรับแหล่งข้อมูลจริงและให้การแสดงผลที่เบาและไม่ยึดติดเทคโนโลยี

• 📋 antv-s2-expert: ผู้ช่วยพัฒนา S2 สำหรับตารางวิเคราะห์แบบไขว้หลายมิติ ใช้เมื่อผู้ใช้ต้องการความช่วยเหลือเกี่ยวกับตาราง Pivot แบบ S2 แผ่นตาราง หรือการพัฒนาใดๆ ที่เกี่ยวข้องกับ @antv/s2

AntV S2 Expert ช่วยผู้ใช้พัฒนาโดยใช้เอนจินตารางวิเคราะห์แบบไขว้หลายมิติ S2 ให้คำแนะนำครอบคลุมเกี่ยวกับ @antv/s2 เอนจินหลัก, การเชื่อมต่อเฟรมเวิร์ก @antv/s2-react และ @antv/s2-vue, ส่วนประกอบการวิเคราะห์ขั้นสูง @antv/s2-react-components, และการแสดงผลฝั่งเซิร์ฟเวอร์ @antv/s2-ssr ครอบคลุมตาราง Pivot แผ่นตาราง เซลล์ที่กำหนดเอง การตั้งธีม เหตุการณ์ การโต้ตอบ การเรียงลำดับ ผลรวม คำแนะนำเครื่องมือ การตรึงแถว/คอลัมน์ ไอคอน การแบ่งหน้า และอื่นๆ

• 🕸️ 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 เช่น การใช้ constructor 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 เช่น การใช้ chain API ที่เลิกใช้งาน, ชื่อพาเล็ตที่ไม่ถูกต้อง, หรือการอ้างอิง d3 ในโค้ดผู้ใช้

ผลการประเมิน

แนวทางของ Harness Engineering ได้รับการทดสอบอย่างเข้มงวดกับกรณีทดสอบการสร้างแผนภูมิ 174 กรณี แสดงให้เห็นถึงการปรับปรุงที่สำคัญเหนือวิธีพื้นฐาน:

ผลลัพธ์แสดงให้เห็นว่า Harness Engineering ช่วยให้ LLM บรรลุความแม่นยำใกล้เคียงระดับที่พร้อมใช้งานจริง (สูงสุด 98.2%) ซึ่งเหนือกว่าแนวทางพื้นฐาน Context7 อย่างมีนัยสำคัญ

[!TIP] มีทักษะเพิ่มเติมกำลังจะมาเร็วๆ นี้

การใช้เป็นไลบรารี

สามารถใช้เป็นไลบรารีในโปรเจกต์ Node.js ของคุณได้ด้วย CLI และ API

การใช้งาน CLI

เรายังมีเครื่องมือ CLI ชื่อ antv สำหรับการใช้งานง่ายบนเทอร์มินัลของคุณ ติดตั้งแบบ global:

npm install -g @antv/chart-visualization-skills

เรียกค้นหรือแสดงรายการทักษะตามคิวรี:

# Retrieve skills by query (metadata only)
antv retrieve "bar chart" --library g2 --topk 10

# Retrieve skills with full markdown content (core constraints auto-prepended)
antv retrieve "bar chart" --library g2 --content

# Retrieve skills and output as JSON
antv retrieve "bar chart" --library g2 --output json

# Get a skill by its exact ID
antv get g2-mark-interval-basic --library g2

# List all available skills
antv list --library g2 --category core

# List skills and output as JSON
antv list --output json

# Show skill info (core constraints from SKILL.md)
antv info --library g2

# Show skill info as JSON
antv info --library g2 --output json

Usage for the command:

Usage: antv [options] [command]

CLI tool for AntV chart visualization skills retrieval

Options:
  -V, --version               output the version number
  -h, --help                  display help for command

Commands:
  retrieve [options] <query>  Search for skills matching a query
  get [options] <id>          Get a skill by its exact ID
  list [options]              List all available skills
  info [options]              Show skill info from SKILL.md
  help [command]              display help for command

Options for retrieve:
  --library <lib>             Filter by library (e.g. g2, g6)
  --topk <n>                  Number of results to return (default: 7)
  --content                   Include markdown content body in results; core constraints (SKILL.md Section 1-2) are always prepended as the first result
  --output <format>           Output format: json | text (default: "text")

หมายเหตุ: --content จะเพิ่มข้อจำกัดหลักของไลบรารี (ส่วนที่ 1 และ 2 ของ SKILL.md จนถึงเครื่องหมาย <!-- CONSTRAINTS:END -->) ที่จุดเริ่มต้นเป็นผลลัพธ์แรกเสมอ เพื่อให้แน่ใจว่าโมเดลได้รับกฎสำคัญพร้อมกับเอกสารอ้างอิง

การใช้งาน API

import { retrieve } from '@antv/chart-visualization-skills';

// Metadata only (no content)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// With full markdown content (core constraints auto-prepended as first result)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// With content but without core constraints
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Library filter, e.g. 'g2' or 'g6'
  topK?: number;      // Number of results (default: 7)
  content?: boolean;  // Include markdown content body (default: false)
  includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content)
}

หมายเหตุ:

• การเรียกค้นเริ่มต้นจะส่งคืนวัตถุผลลัพธ์แบบน้ำหนักเบาที่ไม่มีฟิลด์ content
• content: true จะส่งคืนเนื้อหา markdown (ไม่รวม metadata แบบ frontmatter)
• เมื่อ includeInfo เป็น true (ค่าเริ่มต้นเมื่อ content: true) บล็อกข้อจำกัดหลัก — SKILL.md จนถึง <!-- CONSTRAINTS:END --> — จะถูกแทรกเป็นองค์ประกอบแรก (id มีคำนำหน้า __info__) เพื่อให้แน่ใจว่าโมเดลเห็นกฎสำคัญเสมอ

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // Full SKILL.md body (after frontmatter)
  constraintsContent: string; // SKILL.md body up to <!-- CONSTRAINTS:END --> marker; injected by retrieve when includeInfo: true
}

ใบอนุญาต

ใบอนุญาต MIT - ดูรายละเอียดได้ที่ไฟล์ LICENSE