圖表與視覺元素

<LineChart>、<BarChart>、<Sparkline>、<ProgressBar>、<Gradient> 與 <Image>。

圖表以區塊元素繪製。長條在每個儲存格中使用八個層級，折線則在每個儲存格中使用 2×2 點陣。

即時72×14 · booting Turbolog…tsx

preview://charts:1

<LineChart  height={6}  series={[    { label: "p50", data: p50 },    { label: "p95", data: p95, color: "muted" },  ]}  formatValue={(v) => `${Math.round(v)}ms`}/><BarChart data={[{ label: "iad1", value: 1240 }, { label: "sfo1", value: 860 }]} /><Sparkline data={requests} /><ProgressBar label="Build" value={0.42} />

`<LineChart>`

附有 y 軸和圖例的點陣折線圖。

Prop	說明
`series`	`{ data, label?, color? }[]`
`data`	單一資料序列的簡寫
`height`	列數（預設為 `8`）
`min` / `max`	固定上下界（預設依資料決定）
`axis`	附有最小值／最大值標籤的 Y 軸
`formatValue`	座標軸標籤（預設為 `1.2k`）
`marker`	`quadrant`（預設）或 `braille`

braille 在每個儲存格中容納 2×4 個點。請在終端機中使用：macOS 上 DevTools 主控台使用的 Menlo 字型沒有點字字元，而替代字形比一個儲存格更寬。

資料序列的顏色預設為 accent、success、warning、info 和 danger。

`<BarChart>`

標籤與數值對齊的水平長條圖，精度為八分之一個儲存格。

<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} />

`<Sparkline>`

以最新的資料點填滿寬度。height 大於 1 時會渲染填色區域。

<Sparkline data={throughput} height={3} />

sparkline(values) 以字串形式回傳相同的走勢圖。

`<ProgressBar>`

Prop	說明
`value` / `max`	進度（省略時表示進度不定）
`variant`	`block`（平滑）`line` `thin`
`width`	儲存格數（預設為填滿）
`label`	前置文字
`formatValue`	後置文字（預設為 `42%`）

進度不定的進度列會依渲染器的影格節奏掃動，並在輸出暫停時停止。

`<Gradient>`

逐儲存格插補顏色。多行字串共用同一個漸層，因此可搭配 <AsciiFont> 使用。

<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>

具名漸層：geist dusk ocean mono ember。

`<Image>`

Chromium 和 Firefox 主控台會將圖片繪製為像素精靈圖。像素藝術（256 色以下，且沒有半透明像素）每個儲存格最多保留 8 × 16 個像素，照片則最多保留 4 × 8 個像素。Safari、終端機、純文字副本，以及使用 runtime = "server" 的頁面會使用 ▀ 半區塊：每個儲存格容納兩個像素，上方使用前景色，下方使用背景色。傳入 renderMode="halfblock" 可在所有環境繪製半區塊，如同 1.3 版的 <Image>。

<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />

Prop	說明
`src`	圖片網址（僅限瀏覽器）
`pixels`	以 `{ width, height, data }` 表示的原始 RGBA，每個像素 4 位元組，依列排列
`width` / `height`	寬度以儲存格數計，高度以列數計。傳入其中一項可維持長寬比，兩項都不傳則每個儲存格容納 1 × 2 個像素（`src` 最多縮放至 256 × 256 px）
`fit`	`contain`（預設）、`cover` 或 `fill`
`alt`	`src` 載入期間或載入失敗時顯示的文字
`renderMode`	`auto`（預設：支援時使用精靈圖，其餘使用 `▀` 半區塊）或 `halfblock`

<Image> 也接受版面配置 props。

src 透過畫布載入，因此跨來源圖片需要 CORS。pixels 可在任何環境接受原始 RGBA，包括終端機。

在 Chromium 和 Firefox 中，圖片無法以單一精靈圖呈現時，也會繪製為半區塊：

兩張圖片在相同列並排，例如圖庫。
照片旁有文字。文字旁的像素藝術仍使用精靈圖。
圖片遭 overflow="hidden" 方框裁切，或部分遭另一個方框覆蓋。
透明像素覆蓋文字或超過一種背景色。

`<Pixels>`（實驗性）

@textjs/react/experimental 匯出 <Pixels>，用於遊戲、模擬器和影片等即時 0xRRGGBBAA 影格緩衝區。將封裝的像素直接寫入 source.data，再遞增 frame 以重繪。

import { Pixels, type PixelSource } from "@textjs/react/experimental";const source: PixelSource = { width: 320, height: 200, data: new Uint32Array(320 * 200) };<Pixels source={source} frame={frame} width={80} height={25} pixelAspect={5 / 6} />

Prop	說明
`source`	以 `0xRRGGBBAA` 順序排列的 `{ width, height, data: Uint32Array }`
`frame`	影格計數器；修改 `source.data` 後遞增
`width` / `height`	方框尺寸，以儲存格數和列數計
`fit`	`contain`（預設）或 `fill`
`pixelAspect`	單一來源像素顯示時的寬度除以高度（預設為 `1`）
`palette`	選用的 `PackedColor[]` 調色盤，用於色彩量化
`sample`	半區塊備援濾鏡：`nearest`（預設）或 `average`
`renderMode`	`auto`（預設：支援時使用精靈圖，其餘使用 `▀` 半區塊）或 `halfblock`

renderMode="auto" 在 Chromium 中繪製像素化精靈圖，在 Firefox 中依其主控台樣式規則繪製（未經效能測試），在 Safari、終端機、純文字副本，以及使用 runtime = "server" 的頁面中則改用 ▀ 半區塊。傳入 renderMode="halfblock" 可在所有環境繪製半區塊。

若要不使用 React 繪製像素，請從 @textjs/core/experimental 匯入 drawPixels，以及 DrawPixelsOptions、PixelSource、PixelFit、PixelSample、PixelRenderMode、PixelEncoding 和 PixelRect。其中的 encoding: "rgba" 選項可為靜態圖片保留超過 256 種顏色及漸變透明度，fallback 則在無法顯示精靈圖的位置繪製自訂儲存格。實驗性匯出的版本管理方式，請參閱重大變更。

#<LineChart>

#<BarChart>

#<Sparkline>

#<ProgressBar>

#<Gradient>

#<Image>