点状图（PointChart）#

PointChart（点图）组件用于在二维坐标系中绘制一组独立的数值点，即经典的散点图。每个点由一个 (x, y) 数值对表示，可通过样式属性进一步自定义其外观。

该组件适用于可视化两个连续变量之间的关系、分布或数值测量结果。

使用示例#

1<PointChart
2  marks={[
3    { x: 0, y: 2 },
4    { x: 1, y: 3 },
5    { x: 2, y: 4 },
6    { x: 3, y: 3 },
7    { x: 4, y: 6 },
8  ]}
9/>

属性说明#

marks: Array<object> （必填）#

定义要绘制的所有点。每个点包含以下字段：

• x: number 点在 X 轴上的位置。

• y: number 点在 Y 轴上的位置。

可选地，您还可以通过 ChartMarkProps 提供更多自定义属性：

• symbol：点的形状（如圆形、方形等）
• foregroundStyle：点的颜色
• symbolSize：点的大小
• 其他属性如 opacity（透明度）、annotation（注释）、offset（偏移）、zIndex 等

完整示例#

1const data = [
2  { x: 0, y: 2 },
3  { x: 1, y: 3 },
4  { x: 2, y: 4 },
5  { x: 3, y: 3 },
6  { x: 4, y: 6 },
7]
8
9<PointChart marks={data} />

上述示例将在坐标系中绘制 5 个点，构成一个基础的散点图。

适用场景#

PointChart 适合以下场景：

• 显示两个连续变量之间的关系（如相关性）
• 表示实验数据、坐标点或数值测量结果
• 创建简洁的散点图，可叠加注释或符号样式