图表样式#

该组件提供了一个高度可定制的界面，用于创建和展示多种类型的图表。本文档详细说明了如何使用 Chart 视图的属性来配置轴、比例、标签、图例等。

1. 轴的可见性#

• chartXAxis

  • 类型: "automatic" | "hidden" | "visible"
  • 描述: 设置 X 轴的可见性。
  • 示例:

    1<Chart chartXAxis="visible">
    2  <BarChart ... />
    3</Chart>

• chartYAxis

  • 类型: "automatic" | "hidden" | "visible"
  • 描述: 设置 Y 轴的可见性。
  • 示例:

    1<Chart chartYAxis="hidden">
    2  <LineChart ... />
    3</Chart>

2. 轴标签#

• chartXAxisLabel

  • 类型:

    1{
    2  position?: "automatic" | "bottom" | "bottomLeading" | "bottomTrailing" | "leading" | "overlay" | "top" | "topLeading" | "topTrailing" | "trailing";
    3  alignment?: "leading" | "center" | "trailing";
    4  spacing?: number;
    5  content: VirtualNode;
    6}
  • 描述: 为 X 轴添加标签。
  • 示例:

    1<Chart
    2  chartXAxisLabel={{
    3    position: "bottom",
    4    alignment: "center",
    5    spacing: 10,
    6    content: <Text>X 轴标签</Text>,
    7  }}
    8>
    9  <BarChart ... />
    10</Chart>

• chartYAxisLabel

  • 类型: 与 chartXAxisLabel 相同。
  • 描述: 为 Y 轴添加标签。
  • 示例:

    1<Chart
    2  chartYAxisLabel={{
    3    position: "leading",
    4    content: <Text>Y 轴标签</Text>,
    5  }}
    6>
    7  <LineChart ... />
    8</Chart>

3. 图例#

• chartLegend
  • 类型:

    1"automatic" | "hidden" | "visible" | {
    2  position?: "automatic" | "bottom" | "bottomLeading" | "bottomTrailing" | "leading" | "overlay" | "top" | "topLeading" | "topTrailing" | "trailing";
    3  alignment?: "leading" | "center" | "trailing";
    4  spacing?: number;
    5  content?: VirtualNode;
    6}
  • 描述: 配置图例。
  • 示例:

    1<Chart
    2  chartLegend={{
    3    position: "top",
    4    alignment: "center",
    5    content: <Text>图例</Text>,
    6  }}
    7>
    8  <AreaChart ... />
    9</Chart>

4. 比例#

• chartXScale / chartYScale
  • 类型:

    1ClosedRange<number> | ClosedRange<Date> | string[] | "category" | "date" | "linear" | "log" | "squareRoot" | "symmetricLog" | {
    2  domain: ClosedRange<number> | ClosedRange<Date> | string[];
    3  type: "category" | "date" | "linear" | "log" | "squareRoot" | "symmetricLog";
    4}
  • 描述: 配置 X 或 Y 轴的比例。
  • 示例:

    1<Chart
    2  chartXScale={{ domain: { from: 0, to: 100 }, type: "linear" }}
    3  chartYScale={["A", "B", "C"]}
    4>
    5  <LineChart ... />
    6</Chart>

5. 背景#

• chartBackground
  • 类型:

    1VirtualNode | {
    2  alignment?: "leading" | "center" | "trailing";
    3  content: VirtualNode;
    4}
  • 描述: 为图表容器添加背景。
  • 示例:

    1<Chart
    2  chartBackground={{
    3    alignment: "center",
    4    content: <Rectangle fill="gray" />,
    5  }}
    6>
    7  <PieChart ... />
    8</Chart>

6. 前景样式#

• chartForegroundStyleScale
  • 类型:

    1Record<string, ShapeStyle>;
  • 描述: 自定义图表标记的颜色。
  • 示例:

    1<Chart
    2  chartForegroundStyleScale={{
    3    "类别 1": { color: "blue" },
    4    "类别 2": { color: "red" },
    5  }}
    6>
    7  <BarChart ... />
    8</Chart>

7. 可滚动轴#

• chartScrollableAxes
  • 类型:

    1"vertical" | "horizontal" | "all"
  • 描述: 启用指定轴的滚动。
  • 示例:

    1<Chart chartScrollableAxes="horizontal">
    2  <LineChart ... />
    3</Chart>

8. 选中#

• chartXSelection / chartYSelection / chartAngleSelection
  • 类型:

    1{
    2  value: string | number | null;
    3  onChanged: (newValue: string | number | null) => void;
    4  valueType: "string" | "number";
    5}
  • 描述: 启用指定轴的选择功能。
  • 示例:

    1<Chart
    2  chartXSelection={{
    3    value: "类别 1",
    4    onChanged: (newValue) => console.log("已选择:", newValue),
    5    valueType: "string",
    6  }}
    7>
    8  <BarChart ... />
    9</Chart>

9. 滚动位置#

• chartScrollPositionX / chartScrollPositionY
  • 类型:

    1number | string | {
    2  value: number | string;
    3  onChanged: (newValue: number | string) => void;
    4}
  • 描述: 设置 X 或 Y 轴的初始滚动位置。
  • 示例:

    1<Chart
    2  chartScrollPositionX={{
    3    value: 0,
    4    onChanged: (newValue) => console.log("滚动 X:", newValue),
    5  }}
    6>
    7  <BarChart ... />
    8</Chart>

综合示例#

以下示例展示了如何使用多个属性来创建一个完全自定义的图表：

1<Chart
2  chartXAxis="visible"
3  chartYAxis="visible"
4  chartXAxisLabel={{
5    position: "bottom",
6    alignment: "center",
7    spacing: 8,
8    content: <Text>X 轴标签</Text>,
9  }}
10  chartYAxisLabel={{
11    position: "leading",
12    content: <Text>Y 轴标签</Text>,
13  }}
14  chartLegend={{
15    position: "top",
16    alignment: "center",
17    content: <Text>图例</Text>,
18  }}
19  chartXScale={{ domain: { from: 0, to: 100 }, type: "linear" }}
20  chartScrollableAxes="all"
21  chartForegroundStyleScale={{
22    "类别 A": { color: "green" },
23    "类别 B": { color: "blue" },
24  }}
25  chartBackground={{
26    content: <Rectangle fill="lightgray" />,
27  }}
28>
29  <BarChart
30    marks={[
31      { label: "A", value: 30, foregroundStyle: { color: "red" } },
32      { label: "B", value: 70 },
33    ]}
34  />
35  <LineChart
36    marks={[
37      { label: "A", value: 40 },
38      { label: "B", value: 80 },
39    ]}
40  />
41</Chart>

此示例在单个 Chart 容器中结合了轴标签、滚动、图例、比例、前景样式以及多种图表类型。可将其用作构建自定义图表的模板。