bazi-chart

八字·四柱排盘 React 组件 + 适配器。双语渲染，内联样式，SSR 安全。属于 BaziKit — by AskingMing。

将排盘数据传给 <BaziChart />——它自动识别输入格式、归一化数据，并以中文、英文或双语渲染完整命盘。组件本身不做任何计算。

安装

npm install bazi-chart

react（>= 17）为 peer dependency。术语数据来自 bazi-terms（自动安装）。

用法

<BaziChart /> 接受引擎原始输出（自动识别两种常见社区格式）或预归一化的 NormalizedChart：

import { BaziChart } from 'bazi-chart';

// data = 引擎原始输出（自动识别）…
export default function Chart({ data }) {
  return <BaziChart data={data} lang="both" theme="light" />;
}

import { BaziChart } from 'bazi-chart';
import type { NormalizedChart } from 'bazi-chart';

// …或自行构建的标准化对象
export default ({ chart }: { chart: NormalizedChart }) => (
  <BaziChart chart={chart} lang="en" theme="dark" />
);

渲染内容

四柱（主星、天干地支按五行着色、藏干及其十神、纳音、十二长生、空亡、神煞）、五行分值条形图、刑冲合会面板、大运时间线，以及命宫/身宫/胎元/胎息（当数据源提供时）。

Props

| Prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | data | unknown | — | 原始排盘数据，自动识别并归一化 | | chart | NormalizedChart | — | 预归一化命盘，优先级高于 data | | lang | 'zh' \| 'en' \| 'both' | 'both' | 渲染语言，'both' 显示 中文 · English | | theme | 'light' \| 'dark' | 'light' | 配色主题 | | showDaYun | boolean | true | 显示大运时间线 | | showInteractions | boolean | true | 显示刑冲合会面板 | | showFiveElements | boolean | true | 显示五行分值条形图（数据源提供时） | | showShenSha | boolean | true | 显示各柱神煞（数据源提供时） | | style | CSSProperties | — | 合并到根容器上 |

适配器

当你只需要归一化数据而不需要组件时（如自定义 UI、表格导出或 API 响应），可直接使用适配器：

import { normalize, detectEngine, fromBaziObject, fromPillarMap } from 'bazi-chart';

detectEngine(engineOutput);   // 'baziObject' | 'pillarMap' | 'normalized' | 'unknown'

const chart = normalize(engineOutput);   // 自动分发到对应适配器
// chart.pillars, chart.dayMaster, chart.daYun, chart.interactions, ...

// 也可显式调用某个适配器：
const a = fromBaziObject(baziObjectOutput);   // 顶层「八字」对象
const b = fromPillarMap(pillarMapOutput);     // 按年/月/日/时键控的 pillars

normalize() 对无法识别的输入会抛出明确错误。

NormalizedChart 模型

一套引擎无关的统一结构（meta、solarTime、dayMaster、pillars、fiveElements、daYun、interactions、extras）。适配器仅做重塑，保留原始中文值；所有可推导的属性（五行、阴阳、颜色、翻译）在渲染时通过 bazi-terms 解析。数据源未提供的部分（如五行分值或宫位）为 undefined。

样式

纯内联样式——无需导入 CSS、无需构建步骤，SSR 及任何元框架（Next.js、Remix、Astro）均可安全使用。五行配色遵循传统五色体系（木=绿、火=红、土=棕、金=金、水=蓝），在明暗两套主题下均经过对比度调优。可通过 style prop 覆盖表面样式，或用自定义容器包裹组件。

许可证

MIT © 2026 AskingMing.