Scripting
文档
更新日志
隐私
文档
更新日志
隐私
简体中文

一维柱状图（Bar1DChart）

Bar1DChart 是一种一维条形图组件，用于在多个离散分类之间直观比较数值大小。每一个条形代表一个分类及其对应的数值，适合用于构建简洁的横向或纵向柱状对比图。

使用示例

1<Chart
2  padding={0}
3  frame={{ height: 400 }}
4>
5  <Bar1DChart
6    marks={[
7      { category: "Gadgets", value: 3800 },
8      { category: "Gizmos", value: 4400 },
9      { category: "Widgets", value: 6500 },
10    ]}
11  />
12</Chart>

属性说明

labelOnYAxis?: boolean

是否在 Y 轴上显示分类标签。当设置为 true 时，条形将以横向方式排列。 默认为 false，即在 X 轴上显示标签，条形图为纵向排列。

marks: Array<object> （必填）

定义要渲染的每一个条形的数据项。每个标记包含以下字段：

  • category: string 条形所对应的分类名称。

  • value: number 条形的数值，用于决定长度。

  • 其他可选的 ChartMarkProps 样式属性： 可通过 ChartMarkProps 自定义样式和行为，包括：

    • foregroundStyle（颜色样式）
    • opacity（透明度）
    • symbol（图形符号）
    • annotation（注释）
    • offset（偏移位置）
    • zIndex（显示层级）等

示例代码

1const data = [
2  { type: "Gadgets", profit: 3800 },
3  { type: "Gizmos", profit: 4400 },
4  { type: "Widgets", profit: 6500 },
5]
6
7function Example() {
8  return <NavigationStack>
9    <VStack
10      navigationTitle={"Bar1DChart"}
11      navigationBarTitleDisplayMode={"inline"}
12    >
13      <Chart
14        padding={0}
15        frame={{ height: 400 }}
16      >
17        <Bar1DChart
18          marks={data.map(item => ({
19            category: item.type,
20            value: item.profit,
21          }))}
22        />
23      </Chart>
24    </VStack>
25  </NavigationStack>
26}

运行图表示例

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

使用场景

Bar1DChart 适用于：

  • 比较多个分类项的数值差异
  • 展示排行榜、排序结果等
  • 以极简方式可视化清晰、有限的数据集
大纲