CapDriveBarChart
把每個資料項繪製為一根柱，適合比較分類數值。可橫向或竪向排列，設定數值範圍、類別標籤和數值標籤，並支持正負值。
範例
function main() {
return (
<BarChart
data={[
{ value: 30, label: 'A' },
{ value: 70, label: 'B' },
]}
axis="vertical"
rangeY={[0, 100]}
showLabels={true}
showValueLabels={true}
background={$env.accent}
cornerRadius={6}
yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
/>
);
}
使用說明
- 每個 data 項是一根柱，順序由陣列決定，不需 x。horizontal 改方向，但數值範圍仍是 rangeY。自動範圍含零，負值跨基線延伸，background 填柱體。
- rangeX/rangeY 是數值範圍。隱藏標籤不隱藏軸線，軸線用 stroke="clear"。原生篩選不重疊標籤，啟用顯示不保證每個都出現。
- contentAnimation 過渡文字、圖片或結構資料。interpolate 要求 Polyline 點數/closed、Path 命令序列或圖表結構相容；結構變動時直接更新。
屬性
dataReadonlyArray<BarChartDataPoint>依陣列順序排列的分類資料。每項包含數值 value 和可選標籤 label。
[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]axis?"horizontal" | "vertical"柱體方向：vertical 由左至右排列，horizontal 由上至下排列。
"vertical"rangeY?ChartRange可見數值範圍 [min, max]。省略時自動適應資料並包含零。
[0, 100]showLabels?boolean顯示分類標籤。缺少標籤時留空，原生佈局自動避免重疊。
trueshowValueLabels?boolean顯示自動產生的數值軸刻度。
truebarThickness?number | "auto"柱體粗細，單位為點；auto 依分類間距自動計算。
"auto"xAxis?ChartAxisStyle繪圖區底部的水平軸線。預設使用前景色、1pt 線寬；stroke 設為 clear 可隱藏。
{stroke: HDR($env.foreground), lineWidth: 1}yAxis?ChartAxisStyle繪圖區左側的垂直軸線。預設使用前景色、1pt 線寬；stroke 設為 clear 可隱藏。
{stroke: HDR($env.foreground), lineWidth: 1}background?Paint每根柱體的填色，預設為主題前景色。
HDR($env.dark ? "white" : "black")cornerRadius?number每根柱體的圓角半徑，自動限制在其尺寸內。
0stroke?Paint描邊可用顏色或漸層；clear 隱藏描邊。
"clear"lineWidth?number描邊寬度，單位為點；0 不繪製。
2strokePosition?"inside" | "center" | "outside"相對每根柱體的描邊位置，預設為 inside。
"inside"dash?number[]交替實線及空白的長度，單位為點；空陣列為實線。
[]dashPhase?number虛線樣式沿路徑的位移，單位為點。
0contentAnimation?ContentAnimation可選內容過渡。interpolate 要求分類數量和方向相同，否則直接更新。
{type: "interpolate", duration: 0.25}通用屬性
width?number | "auto" | "fill"寬度：點數、自動測量或填滿父區域。
"fill"height?number | "auto" | "fill"高度：點數、自動測量或填滿父區域。
"fill"x?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0y?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0transform?ViewTransform整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 1 不變，錨點用 0–1。
{rotation: 0}opacity?number整個 View 的不透明度：0 完全透明，1 完全不透明。
1clipped?boolean是否裁切超出 View 邊界的內容。
falseclip?"rectangle" | "ellipse"裁切形狀：rectangle 矩形或 ellipse 橢圓；Material 另可用 false 停用。
"rectangle"mask?View | null透明度遮罩 View，置中顯示且不影響佈局；null 表示不使用遮罩。
<Circle width="fill" height="fill" background="white"/>zIndex?number同層 View 的繪製順序，數值越大越靠前。
0blur?number模糊半徑，單位為點；0 不模糊。
4innerShadow?DrawingEffect特效的顏色、不透明度、模糊半徑及 x/y 位移；距離用點。
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffect特效的顏色、不透明度、模糊半徑及 x/y 位移；距離用點。
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?Color外部陰影顏色。
HDR("black")shadowOpacity?number外部陰影不透明度 0–1；0 隱藏陰影。
0shadowRadius?number外部陰影模糊半徑，單位為點。
4shadowX?number外部陰影位移，單位為點：x 向右、y 向下。
0shadowY?number外部陰影位移，單位為點：x 向右、y 向下。
2animations?BarChartAnimation[]屬性改變時播放動畫。duration/delay 用秒，from/to 設端點，repeat/autoreverse 控制重複，wrap 設週期。
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number兄弟節點中的穩定識別碼。
組合範例
function main() {
return (
<BarChart
width={260}
height={160}
axis="horizontal"
rangeY={[-50, 100]}
data={[
{ value: 80, label: 'A' },
{ value: -25, label: 'B' },
{ value: 45, label: 'C' },
]}
showLabels={true}
showValueLabels={true}
background={$env.accent}
cornerRadius={4}
xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
yAxis={{ stroke: 'clear' }}
/>
);
}
動畫
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke省略時的行為
下表是經實作核對的省略行為；屬性範例不是預設值。固定效果應明確傳值，尺寸和主題色等依環境變動，不能視為常數。
| 屬性 | 省略時的行為 |
|---|---|
data | [] |
axis | "vertical" |
showLabels | true |
showValueLabels | true |
cornerRadius | 0 |
strokePosition | "inside" |
background | HDR($env.dark ? 'white' : 'black') |
xAxis | { stroke: HDR($env.foreground), lineWidth: 1 } |
yAxis | { stroke: HDR($env.foreground), lineWidth: 1 } |