hetu-charts

基于 Vega-Lite 规范和渲染导向解析树的数据可视化图表库。

特性

• 🎨 Vega-Lite 规范支持：完整支持 Vega-Lite 声明式语法
• 🚀 高性能渲染：基于 leafer-ui 的高性能 Canvas 渲染
• 🔧 模块化设计：Monorepo 架构，各模块独立可复用
• 🎯 TypeScript：完整的类型定义
• 🖱️ 丰富交互：支持 tooltip、selection、parameter 等交互功能

安装

npm install hetu-charts
# 或
pnpm add hetu-charts
# 或
yarn add hetu-charts

注意：安装 hetu-charts 时，npm 会自动安装以下外部依赖：

• leafer-ui - Canvas 渲染引擎
• d3-array, d3-format, d3-time-format, d3-shape - 数据处理和图形生成
• vega-scale, vega-expression - Vega 生态工具

快速开始

ESM（推荐）

import { HetuChart } from "hetu-charts";

const chart = new HetuChart("#container");

chart.render({
  data: {
    values: [
      { category: "A", value: 28 },
      { category: "B", value: 55 },
      { category: "C", value: 43 },
    ],
  },
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" },
  },
});

CommonJS

const { HetuChart } = require("hetu-charts");

const chart = new HetuChart("#container");

chart.render({
  data: {
    values: [
      { category: "A", value: 28 },
      { category: "B", value: 55 },
      { category: "C", value: 43 },
    ],
  },
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" },
  },
});

TypeScript

import { HetuChart, VegaLiteSpec } from "hetu-charts";

const spec: VegaLiteSpec = {
  data: {
    values: [
      { category: "A", value: 28 },
      { category: "B", value: 55 },
      { category: "C", value: 43 },
    ],
  },
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" },
  },
};

const chart = new HetuChart("#container");
chart.render(spec);

Bundle 大小

• ESM: ~395 KB (未压缩) / ~97 KB (gzip)
• CJS: ~235 KB (未压缩) / ~64 KB (gzip)

外部依赖（由 npm 自动管理）不计入以上大小。

浏览器兼容性

支持所有现代浏览器：

• Chrome ≥ 90
• Firefox ≥ 88
• Safari ≥ 14
• Edge ≥ 90

注意：需要浏览器支持 ES2015+ 和 Canvas API。

子包

本项目采用 Monorepo 架构，包含以下子包：

• @hetu-charts/share: 共享类型、常量和工具函数
• @hetu-charts/parser: Vega-Lite 规范解析器
• @hetu-charts/scale: 比例尺构建器
• @hetu-charts/analysis-tree: 渲染导向解析树构建器
• @hetu-charts/renderer: 渲染器实现
• @hetu-charts/interaction: 交互功能实现

License

MIT