图表

每个位站产品都有一个图表. 一条线, 排名栏, 共享栏, a 闪光线、计分器、时间线和一行数字——从服务器上绘制 从应用程序自己的标志, 每个都有一个表 后面没有标签 片段,重叠或收缩——所以一个被制成的固定件一次到达了每个产品.

为什么它存在:在2026-10-23年,车主说可视化是"超级" 和“它的包” 是什么让我们特别。" Substrata有一张手卷的行图,什么都没有 其他产品则无。 这是现在唯一活的地方. (颜色和类型来自 design-tokens· ; chartkit是图画. )

安装

pnpm add @bitbaum/chartkit@^0.7.0

安装 npm 的释放, 既不是承诺, 也不是分支, 原因就是聊天 README给出:一个成像范围就是让固定到达每个产品.

使用

import { LineChart, BarChart, ColumnChart, ShareBars, Sparkline, Meter, Timeline, StatTiles } from "@bitbaum/chartkit/react";
import "@bitbaum/chartkit/styles.css";

<LineChart
  series={[{ id: "backlog", label: "Backlog", points: [{ x: "2025-Q1", y: 29, href: "…" }] }]}
  unit="GW"
  caption="GE Vernova Gas Power equipment backlog, GW, by quarter."
  yFrom="zero"                       // or "data"; left out, zero only when the data sits near it
  height={208}                       // CSS px; the width is the container's
/>
<LineChart                           // a year of daily closes: a clean line with a light fill
  series={[{ id: "close", label: "Close", points: closes }]}
  unit="USD"
  yFrom="data"
  markers="auto"                     // "all" (default) | "none" | "ends" | "auto"
  area                               // faint fill under the line, in the series' token colour
  caption="NVIDIA daily closes, USD, last 12 months."
/>
<BarChart rows={[{ label: "China", value: 900000, share: 0.99, estimated: true }, { label: "Other", value: null }]} unit="kg" caption="…" highlight="China" />
<ShareBars rows={[{ label: "BlackRock", share: 0.074 }]} other={0.926} otherLabel="Others, each below 5%" caption="…" />
<ColumnChart series={[{ id: "rev", label: "Revenue", points: [{ x: "FY2024", y: 61 }, { x: "FY2025", y: -4, href: "…" }] }]} unit="USD bn" caption="…" />
<Sparkline points={points} label="Backlog over six quarters" />
<Sparkline                           // a null breaks the line; a tone colours that point's dot
  points={[{ x: "2026-10-01", y: 4, tone: "positive" }, { x: "2026-10-02", y: null }, { x: "2026-10-03", y: 1, tone: "negative" }]}
  label="Mood over three days: one good, one unrecorded, one bad"
/>
<Meter value={12} max={12} label="Severity" href="/methods/severity" />
<Meter value={3} max={10} label="Risk" tone="negative" showValue={false} />  // the caller prints "3/10"
<Timeline events={[{ date: "2026-07-17", label: "…", tone: "down", href: "…" }]} caption="…" />
<StatTiles tiles={[{ label: "Bottlenecks mapped", value: 33, href: "/bottlenecks" }]} />

x 是一个 ISO 周期 (2025, (中文(简体) ), 2025-Q2, (中文(简体) ), 2025-03, (中文(简体) ), 2025-03-31)或数字. 若干系列共用一轴——没有第二Y轴,永远不会有; 两种不同规模的度量衡是两个图表. BarChart 默认排行 (最大的第一,没有最后的数字) 不管他们到达的顺序,画一个 null 以"..."和"..."来估计. ShareBars 其余名称 otherLabel (left out,"Other")——说出剩下的是什么,从不赤裸 "其他87%". ColumnChart 按给定顺序绘制左到右的周期 (财政标签没有被重新排序),数个系列并列,损失低于 零行,表中缺少一个数字作为无列和"-". 每一点 LineChart 和每一事件 页:1 Timeline 当它有一个锚时 href及其价值、期限和 键盘和键盘焦点.

一个日期 LineChart 选择它的滴答,无论它有多少长度: 一个星期的数据,星期一一个月,几个月一年,几年几十年 最多5个,最短的一步 仍然给出3, 第一个标签和 每个新年的第一个年份命名该年。 轴从不空出: a 内部没有步骤的滴答被标记在它的两端.

ColumnChart 打印每个周期的标签。 当还有更多的时间 比剧情有空间, 每秒(第三,...)标签步骤后退,所以 在电话里,每年在电话上 桌面。 该步骤计划在服务器上为图宽和 用于轴上容器查询(无测量,无效果) 图表后面的表格仍然保留着每个时期。 只有一个标签比 整个情节被缩短了.

markers 表示一个值的哪个值 LineChart 带点 : all (默认, 和以前一样); none 单行; ends 只有每个系列的最后 数值; auto 每集最高60分,没有超过100分——每日250分 结为250颗珠是一串珍珠,而不是一串价格线. 一个值 他们的圆点仍然藏在那里:它的目标是一个全高的带子 平面图案(条状花砖,所以线上任何地方都能找到指针或指针) 来显示它的点,一个发线 光标和值。 图表后面的表格无论用哪种方式都具有价值. area 在该系列的每行下增加一个光填充 --ck-series-* 颜色——从不写字.

Meter 带 tone —— 说 accent (默认), neutral, (中文(简体) ), positive, (中文(简体) ), warning 或者说 negative每个 --ck-* 标志——和 showValue={false} 改为 当调用者已经打印出图时, 单独绘制音轨; 值 留在计数器的作用中aria-valuenow),名称和 titleA级 Sparkline 点可能是 y: null,它打破了线 而不是绘制 零(两个空白之间的一个值是一个点),并可能带有 tone (单位:千美元)positive, (中文(简体) ), warning, (中文(简体) ), negative, (中文(简体) ), neutral颜色是它的点。 颜色 永远不是唯一的标志,在火花里说 label 这话是什么意思.

每个图表保证

• 它使在服务器上. 纯SVG和HTML,没有效果,没有测量. 画是伸到盒子上的 SVG (preserveAspectRatio="none", (中文(简体) ), 每个标签都是HTML的,以折叠的比例表示, 所以一个320px的地块 和1440px的一样.
• 任何事物都无法通过指针实现. 每个图表都是 <figure class="ck-chart"> 带有其标题和可视化的隐藏 <table> 会 议 日 程 和 议 程 相同值;装饰部分为 aria-hidden锚不是.
• 没有标签夹或重叠. 长名略去椭圆并 将全文带入 title;取而代之的是,柱子的长度很短,所以一年 或 月从不剪接; 条标签的列最少; 时间线事件 水沟的宽度和它的宽度一样 人数最多. @bitbaum/chartkit/audit 测量它(下).
• 颜色和类型仅来自 --ck-* 变量,默认为 设计托盘并可以设置一次 :root数字 : --ck-ink, (中文(简体) ), --ck-ink-muted, (中文(简体) ), --ck-line, (中文(简体) ), --ck-bg, (中文(简体) ), --ck-accent, (中文(简体) ), --ck-up, (中文(简体) ), --ck-down, (中文(简体) ), --ck-series-1 . -6, (中文(简体) ), --ck-font, (中文(简体) ), --ck-mono序列按指数排列,永远不会 循环 第一次之后每个都有一线和一线 所以设定 在单色主题和打印中幸存下来。 前缀与 chalkkit 共享 目的: --ck-line, (中文(简体) ), --ck-accent, (中文(简体) ), --ck-bg, (中文(简体) ), --ck-font 财务报告和审定财务报表 --ck-mono 意思是两者都一样,所以一个应用 以他们聊天为主题 其图. 光明和黑暗都以象征形式存在.

审计

import { CHART_DEFECTS_SOURCE } from "@bitbaum/chartkit/audit";
const defects = await page.evaluate(`(${CHART_DEFECTS_SOURCE})(document.body)`);
if (defects.length) throw new Error(defects.join("\n"));

findChartDefects(root) 在页面中运行并返回每张图表 文本,其框会留下其图表,或与其它文本重叠在同一文本中 图表,每行一行。 阅读 CSS 没有找到这些; 写出这些单词 以真实宽度表示真实字体. test/browser.mjs 运行它过 以320、390和1280px在光和暗处演示,并首先刻意显示 破碎的图,以证明大门可能失败.

开发

pnpm install
pnpm run verify       # format:check, lint, typecheck, build, test, test:browser
pnpm run demo         # builds demo/dist; open demo/index.html

test:browser 需要铬: pnpm exec playwright install chromium,或设置 CHROMIUM_PATH。 。 。 . dist/ 承诺如此 github: 安装不需要构建 步骤; pnpm run check:dist 说它是否匹配源.

对于比例,通过整体 max数字 : <BarChart rows={[{ label: "Share", value: 1.6 }]} max={100} unit="%" caption="Share of the whole" /> 画一分一分一分 无 max栏杆相对最大的一行 尺度总是被扩展来适应更大的值;无效的或非正的最大值会倒回最大的一行. 可访问表格保留了原始值.

App 语言

LineChart, (中文(简体) ), ColumnChart 财务报告和审定财务报表 Timeline 接受明确的BCP 47 locale (例如: de-CH;数字、日期、轴、工具提示和可访问的表格使用. 日期在协调世界时格式化,所以服务器时区不能移动一个报告日期. Omiting the locale 保留了现有的英语输出. 通过翻译 从应用程序的字典中 periodLabel 在线上/列上, preliminaryLabel 在行图上,和 tableLabels: { date, event, effect } 关于时间表。 这些标签为英语, 除非提供: 一种语言格式 数据,它不猜测产品复制.

<LineChart series={series} caption="Umsatz" locale="de-CH"
  periodLabel="Zeitraum" preliminaryLabel="vorläufig" />

参考间隔、堆放和比例

LineChart 接受 referenceBands={[{ from: 10, to: 20, label: "Expected interval" }]}。 。 。 . 应用程序拥有间隔、标签和单位;图表扩展其尺度以包括 以文本的形式显示并披露准确的间隔。 无效/ 逆行失败 而不是沉默地呈现不同的间隔。 这是一个显示功能, 不是临床范围或医疗建议的来源.

ColumnChart stacked 从零向上和向下堆放正数. 轴包括累积总数;表格保留每个原始值, 包括缺失和零之间的区别。 默认值仍然分组.

DoughnutChart 带 rows: { label, value, href? }[], (中文(简体) ), caption, (中文(简体) ), unit?, (中文(简体) ), locale?, (中文(简体) ), labelHeading? 财务报告和审定财务报表 valueHeading?它使成比例的戒指, 链接到传奇和精确值的可访问表。 价值必须是有限的,并且 非阴性。 空/ 零总画没有被发明的股份 。 颜色使用应用 符号; 传说链接仍然可以不依赖于切片而到达键盘 .

用于正则缩放,使用 order="input" 以保留行序列。 可选 横行 tone 数值(positive, (中文(简体) ), warning, (中文(简体) ), negative) 比较使用主题颜色 而不是硬编码的调色板 色调优先于突出颜色; 保留 有意义的文字标签,所以颜色从来不是唯一的表示.

BarChart 还接受 locale 用于可视化和可取数字格式, 财务报告和审定财务报表 labels (单位:千美元)row, (中文(简体) ), value, (中文(简体) ), share, (中文(简体) ), note, (中文(简体) ), estimated表格标题 并估计文本。 默认保存已存在的英文排名图表 。 对a 满意分配,通过总数 max,正文行并翻译 缩放标签;然后每个栏显示其在所有回复中的份额.