可视化

可视化微件类别由以下微件组成：

• 图表
• 图像库
• 地图
• 表格
• 通知
• 树形结构

---

图表

以下表格提供了关于图表微件可用属性的使用细节。表格后面有几个示例。

属性

IEdges

INodes

示例

动态图表

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "camera": {
    "ratio": null, // 摄像机的比例，目前未设置，保留为null
    "x": null, // 摄像机的x坐标，目前未设置，保留为null
    "y": null  // 摄像机的y坐标，目前未设置，保留为null
  },
  "edges": {
    "sourceNodeIds": "{{graph.sourceNodeIds}}", // 边的源节点ID，通过模板变量获取
    "targetNodeIds": "{{graph.targetNodeIds}}"  // 边的目标节点ID，通过模板变量获取
  },
  "nodes": {
    "iconUrls": "{{graph.iconUrls}}", // 节点的图标URL，通过模板变量获取
    "ids": "{{graph.ids}}", // 节点的ID，通过模板变量获取
    "labels": "{{graph.ids}}", // 节点的标签，与ID相同，通过模板变量获取
    "xPositions": "{{graph.xPositions}}", // 节点的x坐标，通过模板变量获取
    "yPositions": "{{graph.yPositions}}"  // 节点的y坐标，通过模板变量获取
  },
  "selectedNodeIds": [
    "n18" // 当前选中的节点ID
  ]
}

静态图表

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{
  "camera": {
    "ratio": null,  // 相机比例，当前未设置
    "x": null,      // 相机X轴位置，当前未设置
    "y": null       // 相机Y轴位置，当前未设置
  },
  "defaultIconUrl": "resources/map-people.svg",  // 默认图标的URL路径
  "edges": {
    "ids": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "labels": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "sourceNodeIds": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "targetNodeIds": [
      "n2",
      "n3",
      "n4",
      "n5",
      "n1"
    ]
  },
  "layout": {
    "type": "layered"  // 布局类型为分层布局
  },
  "nodes": {
    "ids": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "labels": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "xPositions": [
      100,
      30.9,
      -80.9,
      -80.9,
      30.9
    ],
    "yPositions": [
      0,
      95.1,
      58.78,
      -58.78,
      -95.1
    ]
  },
  "selectedNodeIds": [
    "n1"  // 当前选中的节点ID
  ]
}

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "camera": {
    "ratio": null,  // 摄像机的比例，初始化为 null
    "x": null,      // 摄像机的 x 轴位置，初始化为 null
    "y": null       // 摄像机的 y 轴位置，初始化为 null
  },
  "edges": {
    "sourceNodeIds": [],  // 边的起始节点 ID 列表，初始化为空
    "targetNodeIds": []   // 边的目标节点 ID 列表，初始化为空
  },
  "nodes": {
    "ids": [],            // 节点 ID 列表，初始化为空
    "xPositions": [],     // 节点在 x 轴上的位置列表，初始化为空
    "yPositions": []      // 节点在 y 轴上的位置列表，初始化为空
  },
  "selectedNodeIds": []   // 被选中的节点 ID 列表，初始化为空
}

---

图像库

下表提供了有关图像库微件可用属性的使用详情。

属性

---

地图

Slate的地图微件由 Leaflet ↗ 支持。

地图由图层组成：基础图层（也称为瓦片图层；这是背景地图图像）和一些叠加图层（也称为特征图层；这是您感兴趣的数据）。地图微件支持特征图层的光栅和矢量瓦片。

有关网络地图技术的有用介绍，请参阅 Mapbox 文档 ↗。Slate使用Mapbox作为其基础地图图像的来源。

术语

• 地图瓦片： 地图微件的基础图层，这些瓦片只是图像。它们不包含数据。您可以将地图瓦片视为地图的“背景”。地图瓦片在 Misc 选项卡中配置，并适用于整个地图微件，而不仅仅是单个图层。一次只能显示一种地图瓦片。
• 特征： 在地图上绘制的点或形状，与某种数据相关联。
• 矢量： 表示图像的另一种方法。光栅图像逐像素描述图像；基本上是一个彩色像素的网格。矢量图像则相反，描述点之间的线。这意味着矢量图像可以在不同的大小上清晰显示。
• 矢量瓦片： 以矢量形式包含形状数据。
• 瓦片服务器： 动态地将形状数据作为瓦片提供。
• 地图瓦片来源： 提供地图的基础瓦片。技术上也是一个瓦片服务器。

图层类型

Slate具有以下叠加图层类型：

• 位置
• 热力图和热网格
• 形状
• 矢量
• 分级统计图
• Raven

位置

位置图层仅包含点（Leaflet 标记 ↗），由纬度/经度对标识。您可以配置地图微件以将这些点显示为圆形或图标。

热力图和热网格

热力图和热网格图层也处理点数据，但不是简单地在地图上显示这些点，而是显示一个关于这些点分布的计算叠加层。热力图显示点的密度为彩色渐变，而热网格将点分组到桶中，并将桶显示为离散的彩色单元。

形状

除了单独的点外，形状和矢量图层还可以包含多边形形式的数据—信息存储为一系列点和它们之间的线。形状图层以 GeoJSON ↗ 格式提供这些多边形。GeoJSON文件可以直接从您的Slate服务器提供。

GeoJSON特征存储为JSON，并翻译为SVG（图像）文件。这些图像在地图微件首次加载时一起加载。

矢量

矢量图层在矢量瓦片中提供形状数据。您必须运行一个外部瓦片服务器来提供矢量瓦片。 矢量瓦片是动态加载的（仅在它们进入地图视野时）。矢量瓦片也直接在画布上绘制特征，而不是将它们渲染为图像，因此矢量图层可以比形状图层拥有更多特征。

分级统计图

分级统计图图层也处理多边形数据，但它们为每个特征添加了一个附加值，并将这些值投影到一个色彩尺度上。然后，每个特征在地图上显示为与该值相对应的颜色。这作为某些特定统计数据的可视化。

例如，您可能有一个按人口密度着色的州地图，或按社会脆弱性指数着色的邮政编码地图。

Raven

如果您需要在Slate应用程序中使用Raven地图，请联系您的Palantir代表。

基础瓦片

地图微件附带多种基础瓦片图层选项。选项包括深色主题、浅色主题、卫星主题、街道地图主题和我们的默认主题。还有一个 All 选项，允许您使用图层选择器直接在地图上切换主题。

在属性编辑器的 Misc 选项卡中，从 Tile Layer 下拉菜单中选择：

地图上的数据规模

形状图层（GeoJSON）支持最低的数据规模。在大约1000个特征时，地图性能明显下降。对于大于此的数据，您应该改用矢量图层。您也可以尝试简化GeoJSON中的几何形状以提高性能。

位置图层在大约5000-10000个点时性能下降。

禁用交互功能

如果您想在应用程序中显示静态地图，可以禁用平移和缩放功能。您还可以移除基础图层，如果您只想显示特征数据（而不是基础地图瓦片）。

示例

位置地图图层

包含自定义样式：

您还可以使用图层名称或.layer${layerIndex}为图层中的所有标记/群集进行样式设置。只有作为有效CSS类的图层名称才会被添加：

分级统计图地图图层

矢量地图图层

热力图图层

属性

IBaseLayerOptions

IBounds

IChoroplethLayerOptions

IColorScaleOptions

IHeatgridLayerOptions

IHeatmapLayerOptions

ILatLng

ILayerModel

ILocationLayerOptions

IMapSelection

IRectangleShape

ICircleShape

IRavenLayerFilterOptions

IRavenLayerOptions

IShapeLayerOptions

IVectorTileLayerOptions

IVectorTileOptions

IVectorTileStyleOptions

---

表格

下表提供了有关表格微件可用属性的使用详情。表格后面跟随多个示例。

属性

IColumnOption

IGridOptions

ISelectionOptions

ISortOptions

ITableHover

ITablePagingOptions

示例

动态表格

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  "columnData": "{{query1}}",  // 查询数据源
  "columnOptions": {
    "id": {
      "name": "ID",  // 列名为ID
      "width": 50    // 列宽度为50
    },
    "name": {
      "name": "Full Name"  // 列名为全名
    },
    "address": {
      "name": "Home Address"  // 列名为家庭住址
    },
    "phone_number": {
      "name": "Phone Number"  // 列名为电话号码
    },
    "score": {
      "name": "Score",  // 列名为分数
      "horizontalAlignment": "right"  // 水平对齐方式为右对齐
    }
  },
  "columnOrder": [
    "id",
    "name",
    "address",
    "phone_number",
    "score"
  ],
  "gridOptions": {
    "enableSelection": true,  // 启用选择功能
    "enableSorting": true,    // 启用排序功能
    "pagingOptions": {
      "currentOffset": 0,      // 当前偏移量
      "pageSize": 10,          // 每页显示的条目数
      "totalServerItems": 100  // 服务器中的总条目数
    },
    "selectionOptions": {
      "checkbox": false,    // 不启用复选框选择
      "multiSelect": true   // 启用多选
    },
    "sortOptions": {
      "columnId": "score",  // 排序的列为分数
      "isAscending": false  // 以降序排序
    }
  },
  "selectedRowKeys": [],  // 当前选中的行键
  "selectionIdentityColumnId": "id",  // 用于选择的标识列ID
  "serverEnabled": true,  // 启用服务器功能
  "tooltipsEnabled": false  // 不启用工具提示
}

静态表格

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "columnData": {
    "staticOptions": [
      "option1",
      "option2",
      "option3"
    ]
  },
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {
    "enableSelection": true, // 启用选择功能
    "selectionOptions": {
      "checkbox": true, // 启用复选框选择
      "multiSelect": false // 禁用多选功能
    }
  },
  "selectedRowKeys": [], // 当前选中行的键
  "selectionIdentityColumnId": "staticOptions", // 选择标识列的ID
  "serverEnabled": false, // 不启用服务器功能
  "tooltipsEnabled": false // 不启用工具提示
}

默认设置

Copied!
1
2
3
4
5
6
7
8
9
{
  "columnOptions": {},  // 列选项
  "columnOrder": [],  // 列顺序
  "gridOptions": {},  // 网格选项
  "selectedRowKeys": [],  // 选中行的键
  "selectionIdentityColumnId": "Metric",  // 选择标识列ID
  "serverEnabled": false,  // 服务器启用状态
  "tooltipsEnabled": false  // 工具提示启用状态
}

教程：添加一个表格微件

假设你想要添加一个表格微件来显示航班数据。在左上角选择 微件 按钮，然后选择 可视化 > 表格，以向你的 Slate 应用程序中添加一个表格微件。

将表格微件重命名为一个更容易识别的名称。在属性编辑器中选择微件的名称，并将其更改为 w_flightTable。

通过在 数据 字段中输入 "{{q_allFlights}}" 来配置表格以使用 q_allFlights 查询。你应该会看到表格填充了数据。

注意，"{{q_allFlights}}" 不是纯 JSON 语法。大括号是 Handlebars 语法，其中每个表达式表示为 {{expression}}。参见 Handlebars 以了解其在 Slate 中的使用。

你的表格现在具有正确的数据，但格式可以改进。选择 添加所有列 以查看底层数据中每列的格式选项。

由于 flight_id 列不是人类可读的列，现在将其隐藏。然而，我们将在稍后配置选择一行或多行的功能时保留在表中以作参考。

对于其余的列，选择一个显示名称作为 标题，并添加格式字符串以使用 MomentJS ↗ 的格式化字符串来清理时间戳。

我们现在有一个整洁显示所有数据的表格：

接下来，设置用户如何通过选择和排序与表格交互。

在属性编辑器中切换到 杂项 选项卡，并勾选 允许选择 和 启用排序。用户现在可以直接选择列以查看表格以不同方式排序，并可以点击特定行以选择它。

最后，决定使用什么作为表格中给定行的唯一标识符。在这种情况下，使用航班的名称。在标记为 键列 ID 的下拉菜单中，选择 flight_id。

配置分页和排序

勾选 启用分页 和 服务器分页/排序 选项。选择一个 页面大小 数字来设置一次显示给用户的行数。

启用这些选项后，你的表格将现在跟踪当前页面；我们可以在查询中使用这些信息来仅带回相关行进行显示。

打开查询编辑器并返回到 q_allFlights。我们现在将更新 LIMIT 语句以反映表格中配置的页面大小，并添加 OFFSET 语句以请求 Postgres 提供给我们正确的结果页面。

使用与我们用于将查询数据包含到表格微件中的相同 Handlebars 语法，从查询内部引用表格微件的状态：

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
SELECT
    flight_id, -- 航班ID
    carrier_code, -- 航空公司代码
    tail_num, -- 飞机尾号
    origin, -- 起始地
    dest, -- 目的地
    dep_ts_utc, -- 出发时间（UTC）
    arr_ts_utc, -- 到达时间（UTC）
    distance, -- 航程距离
    actual_elapsed_time -- 实际飞行时间
FROM "foundry_sync"."{{v_flightTable}}" -- 从指定的航班表中选择数据
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}} -- 限制返回结果的行数
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}} -- 从指定的偏移量开始返回结果

现在，您的表格一次显示20行，您可以选择下一个按钮或跳转到特定页面。现在，让表格微件知道总行数，以便正确显示“总条目”。

为此，创建一个名为 q_flightCount 的新查询并计算行数：

Copied!
1
2
3
SELECT
    COUNT(flight_id) as num_flights -- 计算航班的数量，并将结果命名为 num_flights
FROM "foundry_sync"."{{v_flightTable}}" -- 从指定的动态表中查询数据，该表名由变量 v_flightTable 确定

选择 更新 以保存查询并返回到表格微件 Misc 选项卡。在 Server Total 输入中，使用 Handlebars 引用我们查询中的计数：

Copied!
1
2
{{q_flightCount.num_flights.[0]}}
# 访问 `q_flightCount` 字典中 `num_flights` 列表的第一个元素

现在，我们的表格知道我们正在显示特定的一组行，来自于总条目（对于flights数据集为4.2M，或者对于last-mile-flights为73,946）。

这解决了分页问题，并允许我们遍历大型数据集，而不会使用户浏览器负担过重或查询超时。我们仍然必须开启服务器端排序，以便我们的查询响应用户与表格的交互。

返回到q_allFlights并在我们的查询中添加一个ORDER BY子句。就像您参考pagingOptions.pageSize和pagingOptions.currentOffset一样，参考.sortOptions.columnId和.sortOptions.isAscending以创建正确的SQL语句：

Copied!
1
2
3
4
5
6
7
8
9
-- 根据 w_flightTable.gridOptions.sortOptions.columnId 指定的列进行排序
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    -- 如果 isAscending 为 true，则按升序排序
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    -- 否则按降序排序
    {{else}}
        DESC
    {{/if}}

您应该会看到一个新可用的条件 Handlebars 块语句。此语句允许您将逻辑注入到文本插值中。在这种情况下，我们可以根据用户在表中的选择选择ASC或DESC。

现在，您的完整查询应如下所示：

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
SELECT
    flight_id,          -- 航班编号
    carrier_code,       -- 航空公司代码
    tail_num,           -- 飞机尾号
    origin,             -- 出发地机场代码
    dest,               -- 目的地机场代码
    dep_ts_utc,         -- 出发时间（UTC）
    arr_ts_utc,         -- 到达时间（UTC）
    distance,           -- 飞行距离
    actual_elapsed_time -- 实际飞行时间
FROM "foundry_sync"."{{v_flightTable}}"
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}} -- 根据指定列排序
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC             -- 升序排列
    {{else}}
        DESC            -- 降序排列
    {{/if}}
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}} -- 限制返回的行数
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}} -- 设置返回结果的偏移量

该SQL查询从 foundry_sync 数据库的 {{v_flightTable}} 表中选择航班相关信息。结果根据 {{w_flightTable.gridOptions.sortOptions.columnId}} 指定的列进行排序，可以升序或降序排列。返回的行数由 {{w_flightTable.gridOptions.pagingOptions.pageSize}} 限制，并从 {{w_flightTable.gridOptions.pagingOptions.currentOffset}} 偏移量开始。 为表格添加一个标题，以便一目了然地解释其显示的信息。

选择 微件 按钮，从选项中选择一个简单的 文本 微件。

在文本微件中填写表格的标题：All Flights 或 Last Mile Flights，根据具体情况选择。

将文本微件移动到表格的左上角，使用网格线确保一切对齐。

现在，将表格正确地排列在标题和副标题下方。按住 Cmd 键选择表格及其标题（或拖动选择）两个微件，然后移动两个微件，使它们在应用程序标题下正确对齐。

您的应用程序现在应如下面所示，带有完成的表格微件。注意，现在您可以选择一行并对表格进行排序。

---

Toast

下表提供了有关 Toast 微件可用属性的使用详情。表后跟随几个示例。

属性

操作

事件

示例

Toast

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Toast Example",  // 操作按钮的文本，"Toast Example"是示例文本
  "hasAction": false,             // 是否包含操作按钮，false表示没有
  "intent": -1,                   // 意图值，-1通常表示没有特定的意图
  "message": "Toast Message",     // 显示的消息文本，"Toast Message"是示例消息
  "timeout": 600                  // 消息显示的持续时间，以毫秒为单位，这里是600毫秒
}

默认值

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Action!", // 行动按钮的文本
  "hasAction": false,      // 是否具有行动按钮
  "intent": -1,            // 意图标识符，-1表示没有特定意图
  "message": "Message",    // 消息内容
  "timeout": 3000          // 超时时间，单位为毫秒
}

---

树

下表提供了有关树微件可用属性的使用详情。

属性

默认值

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "contents": [
                {
                  "childNodes": [
                      {id: 3, label: "bar 1"},
                      {id: 4, label: "bar 2"}
                  ],
                  "iconName": "folder-close", // 图标名称，表示文件夹关闭状态
                  "id": 1, // 节点唯一标识符
                  "label": "bars", // 节点标签名称
                },
                {
                  "id": 2, // 节点唯一标识符
                  "label": "foo" // 节点标签名称
                }
              ],
  "searchText": "", // 搜索文本，当前为空
  "selectedNodes": [], // 当前选中的节点列表，当前为空
  "selectionType": SelectionType.SINGLE // 选择类型，单选
}