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 值。axis=horizontal 仅改变柱的方向，数值范围仍叫 rangeY。自动范围包含零，负值向基线另一侧延伸；background 填的是柱体，不是整张图。
- rangeX/rangeY 是数值范围，不是标签范围。隐藏标签不会隐藏轴线；用 xAxis/yAxis 的 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对整个 View 做视觉变换，不改变布局。平移用点，旋转和倾斜用角度，缩放 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 } |