Junhan2/ztd-charts

项目介绍

ztd charts 是一个 React 图表库，提供 36 种图表类型，全部以纯 SVG 渲染，除 React 作为 peer dependency 外没有运行时依赖。它面向需要制作报告和仪表盘的开发者，强调每张图只突出一个要点：一个数据项使用强调色，其余保持中性，并在图表下方给出粗体结论。图表会在滚动进入视口时绘制，在数据变化时从当前位置平滑过渡，并支持拖选区间查看变化、最高和最低值。无障碍能力默认内置：键盘导航、屏幕阅读器描述、数据表、减少动态效果以及符合 WCAG AA 的标签对比度。每张图也可以写成带公开 JSON Schema 的 JSON spec，CLI、MCP server 和 AI agent 都基于该格式工作；库支持英语和韩语两种语言环境。

快速使用

先安装包，然后用 ChartCard 包裹图表并传入标题、图例和结论文本：

npm i ztd-charts

import { ChartCard, PieChart } from "ztd-charts";

const sales = [
  { device: "Mobile", share: 72 },
  { device: "Desktop", share: 23 },
  { device: "Tablet", share: 5 },
];

export function SalesByDevice() {
  return (
    <ChartCard
      title="Sales by device"
      subtitle="Share of revenue (%)"
      legend={[
        { label: "Mobile", color: "accent" },
        { label: "Desktop", color: "ink" },
        { label: "Tablet", color: "neutral" },
      ]}
      takeaway="Mobile brings in most sales"
    >
      <PieChart data={sales} label="device" value="share" highlight="Mobile" />
    </ChartCard>
  );
}

同一张图也可以写成 JSON spec 交给通用 Chart 组件，字段包括 type、data、encoding 和 options。如果要用 AI 辅助，可以把 MCP server 加到 Claude Code，并用 CLI 从 CSV 推荐图表、把 spec 渲染成 PNG：

claude mcp add ztd-charts -- npx -y ztd-charts-mcp
npx ztd-charts-cli suggest sales.csv --out-dir charts
npx ztd-charts-cli render donut.json --out donut.png --theme light --scale 2

MCP server 可以列出图表、返回图表 schema 和示例、校验 spec 并给出字段修改建议、渲染为 PNG、SVG 和 React 代码，并支持从 CSV、行数据或 URL 推荐图表。文档站提供在线演示和 playground，可以直接查看每张图的属性和可复制代码。

使用约束

React 是唯一的 peer dependency，超大数据集会自动切换到 canvas 渲染。36 种图表按占比、层级、流向、比较、趋势、分布、关系和 KPI 分组。除默认的 en-US 外，要通过 locale="ko-KR" 启用韩语数字格式和图表文本。CLI 与 MCP server 通过 npx 运行，需要 Node.js 并能够访问 npm registry。单个图表加共享核心的 Brotli 体积约为 12 到 24 kB；QA 报告给出了对比度、帧率、1 万点压力测试和包体积的检查结果。

HotRepo 点评

该仓库于 2026-11-09 进入 HotRepo 的 TypeScript 新项目榜，当时有 116 个 Star、12 个 Fork，在记录的一小时增长窗口内新增 10 个 Star；没有记录到 GitHub 日榜最好名次。README 用在线图库、示例仪表盘、QA 报告和图表目录来支撑功能说明，并把交付拆成 React 库、CLI 和 MCP 三个 npm 包，读者可以据此直接找到使用入口。