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

标签线图（RuleLineForLabelChart）

RuleLineForLabelChart 用于在图表中根据标签（或日期）位置绘制垂直或水平的参考线。通常与其他图表类型（如 BarChart 或 LineChart）配合使用，用于高亮特定的分类或时间点。

类型定义

1declare const RuleLineForLabelChart: FunctionComponent<{
2  /**
3   * 是否在 Y 轴显示标签。如果为 true，则参考线将水平绘制。默认为 false（垂直绘制）。
4   */
5  labelOnYAxis?: boolean;
6
7  /**
8   * 参考线标记数组，每个标记表示在哪个标签或日期处绘制参考线。
9   */
10  marks: Array<{
11    /**
12     * 要绘制参考线的位置，可以是字符串标签或 Date 类型。
13     */
14    label: string | Date;
15
16    /**
17     * 可选，仅在 label 为 Date 类型时有效，指定日期单位（如 'month', 'day'）。
18     */
19    unit?: CalendarComponent;
20  } & ChartMarkProps>;
21}>;

属性说明

属性名 类型 说明
labelOnYAxis boolean 是否在 Y 轴绘制标签。为 true 时参考线为 水平线，默认为垂直线。
marks Array 包含多个参考线定义的数组，每个参考线可以包含样式配置，如颜色、不透明度等。

每个 marks 项支持以下属性：

  • label：要绘制参考线的位置（字符串或日期）。
  • unit：可选，仅用于日期类型。
  • foregroundStyle：可选，线条颜色。
  • opacity：可选，线条透明度。
  • lineStyle：可选，自定义虚线样式（如 [3, 2] 表示3个点的实线和2个点的空格交替）。

示例：在柱状图中标记关键分类

1import {
2  Chart,
3  RuleLineForLabelChart,
4  BarChart,
5  Navigation,
6  NavigationStack,
7  Script,
8  VStack
9} from "scripting"
10
11const data = [
12  { label: "Q1", value: 1500 },
13  { label: "Q2", value: 2300 },
14  { label: "Q3", value: 1800 },
15  { label: "Q4", value: 2700 },
16]
17
18const referenceLines = [
19  { label: "Q2", foregroundStyle: "blue", lineStyle: { dash: [3, 2] } },
20  { label: "Q4", foregroundStyle: "red", opacity: 0.5 },
21]
22
23function Example() {
24  return (
25    <NavigationStack>
26      <VStack
27        navigationTitle="带参考线的柱状图"
28        navigationBarTitleDisplayMode="inline"
29      >
30        <Chart frame={{ height: 300 }}>
31          <BarChart marks={data} />
32          <RuleLineForLabelChart marks={referenceLines} />
33        </Chart>
34      </VStack>
35    </NavigationStack>
36  )
37}
38
39async function run() {
40  await Navigation.present({ element: <Example /> })
41  Script.exit()
42}
43
44run()

典型用途

  • 在时间轴中高亮关键事件或时间点。
  • 在分类图中划分视觉区域。
  • 表示特殊标签、阈值或比较基准。
大纲