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

甘特柱状图（BarGanttChart）

BarGanttChart（甘特条形图）组件用于可视化多个分类下的时间区间，非常适合展示日程安排、任务持续时间或项目时间线。每条条形从 start 延伸至 end，表示某项任务或事件在时间轴上的跨度。

使用示例

1<Chart frame={{ height: 400 }}>
2  <BarGanttChart
3    labelOnYAxis
4    marks={[
5      { label: "Job 1", start: 0, end: 15 },
6      { label: "Job 2", start: 5, end: 25 },
7      ...
8    ]}
9  />
10</Chart>

属性说明

labelOnYAxis?: boolean

是否在 Y 轴显示分类标签。当为 true 时，图表将以横向方式绘制（即典型甘特图布局），条形沿 X 轴表示时间跨度。 默认为 false，即条形纵向排列，标签显示在 X 轴。

marks: Array<object> （必填）

定义要渲染的时间区间。每个对象必须包含以下字段：

  • label: string 条形所代表的分类名称（例如任务名或工种）。

  • start: number 条形的起始位置，通常代表开始时间或起点值。

  • end: number 条形的结束位置，代表结束时间或终点值。图表将绘制一条从 start 到 end 的条形。

你也可以提供其他 ChartMarkProps 来自定义样式和行为。

示例代码

1const data = [
2  { job: "Job 1", start: 0, end: 15 },
3  { job: "Job 2", start: 5, end: 25 },
4  { job: "Job 1", start: 20, end: 35 },
5  { job: "Job 1", start: 40, end: 55 },
6  { job: "Job 2", start: 30, end: 60 },
7  { job: "Job 2", start: 30, end: 60 },
8]
9
10function Example() {
11  return <NavigationStack>
12    <VStack
13      navigationTitle={"BarGanttChart"}
14      navigationBarTitleDisplayMode={"inline"}
15    >
16      <Chart frame={{ height: 400 }}>
17        <BarGanttChart
18          labelOnYAxis
19          marks={data.map(item => ({
20            label: item.job,
21            start: item.start,
22            end: item.end,
23          }))}
24        />
25      </Chart>
26    </VStack>
27  </NavigationStack>
28}

运行图表示例

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

使用场景

BarGanttChart 非常适用于：

  • 项目计划与任务排程
  • 展示任务重叠与时间持续分布
  • 表达资源在时间轴上的分配情况
大纲