使用高级格式化

可以使用 Arcade 表达式对列表指示器元素进行高级格式化,以自定义数据点的渲染方式。 数据点可根据元素的配置方式表示要素或汇总统计数据。 使用要素时,单个数据点代表单个要素。 使用统计数据时,每个数据点代表该统计数据的结果。 列表元素将要素数据点渲染为行项目,每行代表一个数据点。 指示器元素一次渲染一个数据点。 表元素会将要素数据点渲染为行,且能够控制该行中每个单元格的内容和格式。

和属性表达式(用于图层的弹出窗口、样式和标注中)不同,将为每个元素创建一个表达式。 该表达式针对每个数据点运行,并返回该元素的系统定义的属性和用户定义的属性。 系统定义的属性是您将在元素中配置的设置,例如文本和背景颜色。 用户定义的属性由用户在表达式中定义,可以在配置元素时引用。

注:

web 地图中创作的属性表达式不会继续用于仪表盘元素。

下表汇总了将被从您的图层传入表达式的数据:

变量名称类型描述

$datapoint

要素或字典

适用于指示器、表和列表

$reference

字典

适用于指示器

注:
编写 Arcade 表达式时,应谨记以下信息:
  • 在字典中的每个属性后添加逗号,最后一个属性除外。
  • 属性名称不得包含空格或特殊字符。

格式化列表

对于列表元素,可以通过启用高级格式化选项使用 Arcade 表达式。 选择使用高级格式化后,颜色输入与其他系统定义的属性将不可用。

为每个行项目运行的表达式将用于定义列表中各行的渲染方式。 此外,表达式也可用于创建能够在模板中引用的属性。

可以使用 Arcade 编辑器中的 $datapoint 全局变量来引用数据点属性。 下表提供了可以以字典形式从表达式返回的属性列表:

属性值类型描述

textColor

字符串

行项目的基本文本颜色

backgroundColor

字符串

行项目的背景颜色

separatorColor

字符串

行项目的底框颜色

selectionTextColor

字符串

选定项目时用于行项目文本的颜色

selectionColor

字符串

选定项目时使用的基本文本颜色

属性

字典

属性值对的字典

yourAttributeName

字符串

可以使用 {expression/yourAttributeName} 语法在模板中引用的属性

注:

不支持几何函数。

例如,如果您希望列表的背景颜色在值大于某个阈值时变为红色,则可以创建一个如下所示的变量:

var color = IIF($datapoint.fieldName>[threshold], '#F3DED7','')

在此变量中,fieldName 是您的值的字段,[threshold] 是您希望更改背景颜色时所使用的值 变量可用作属性值,如下例所示:

backgroundColor: color,

在背景颜色属性中使用此变量将为您提供一个类似于以下内容的表达式,其中当速度值大于 40 时,列表项的背景颜色将变为红色:

var color = IIF($datapoint.Speed > 40, '#F3DED7', '');

return {
	backgroundColor: color
}

启用列表中的高级格式化

要在列表元素中启用高级格式化,请执行以下操作:

  1. 在列表的配置窗口中,单击列表选项卡。
  2. 高级格式化部分,单击启用
    注:
    启用高级格式化后,系统定义的设置(如颜色输入)将不可用。 这些配置是在您的表达式中创建的。 如果在启用高级格式化前输入值,则它们会自动添加到您的表达式中。
  3. 在编辑器中创建格式化表达式。
    提示:
    对于日期字段,使用文本函数将其转换为字符串,它们将使用仪表盘时区显示。 您还可以使用文本函数按照偏好设置值的格式。 如果您需要任何关于 Arcade 函数的帮助,请单击函数旁的信息按钮以查看其他详细信息。
  4. 如果希望表达式按特定间隔运行,例如,如果表达式使用 Now() 函数、启用刷新脚本切换按钮和设置刷新间隔。
  5. 使用语法 {expression/yourAttributeName} 输入模板字段中的任意新属性。

格式化指示器

对于指示器元素,可以通过启用高级格式化选项使用 Arcade 表达式。 选择启用高级格式化后,系统定义的属性(例如颜色选项和值格式化)将变得不可用,并且条件格式化将关闭。 表达式用于定义这些渲染属性和条件逻辑。 此外,表达式可以传递要在常规选项卡上的标题描述字段中引用的用户定义属性。

在指示器中包括参考值时,如果启用高级格式化,数据选项卡上将仅提供基于统计数据的参考类型。 如果您先前定义了固定值引用类型,它将与任何转换系数、文本和颜色格式化一起自动添加到表达式中。 在启用高级格式化之前完成的值格式化将被移除,并需要使用值模式在表达式中进行定义。

注:

Arcade 不支持上一个值。 如果在启用高级格式化前设置了上一个值引用类型,它将被转换为当前值。

可以使用 Arcade 编辑器中的 $datapoint 全局变量来引用数据点属性。 根据值类型是要素还是统计数据,$datapoint 将分别属于要素类型或字典类型。 如果已在数据选项卡上配置了引用统计数据,则 $reference 全局变量也将在编辑器中可用。

下表提供了可以以字典形式从表达式返回的属性列表:

属性值类型描述

textColor

字符串

指示器元素的基本文本颜色

backgroundColor

字符串

指示器元素的背景颜色

topText

字符串

显示为顶部文本

topTextColor

字符串

顶部文本的颜色

topTextOutlineColor

字符串

顶部文本轮廓的颜色

topTextMaxSize

字符串

最大顶部文本大小(超小 | 特小 | 小 | 中等 | 大 | 特大 | 超大)

middleText

字符串

显示为中间文本

middleTextColor

字符串

中间文本的颜色

middleTextOutlineColor

字符串

中间文本轮廓的颜色

middleTextMaxSize

字符串

最大中间文本大小(超小 | 特小 | 小 | 中等 | 大 | 特大 | 超大)

bottomText

字符串

显示为底部文本

bottomTextColor

字符串

底部文本的颜色

bottomTextOutlineColor

字符串

底部文本轮廓的颜色

bottomTextMaxSize

字符串

最大底部文本大小(超小 | 特小 | 小 | 中等 | 大 | 特大 | 超大)

iconName

字符串

为指示器定义的图标名称

注:

图标名称将在表达式之外定义。

iconAlign

字符串

图标放置在中间文本旁边(左 | 右)

iconColor

字符串

图标的填充颜色

iconOutlineColor

字符串

图标的轮廓颜色

noValue

布尔

标记为不显示值文本,而非显示指示器 (true | false)

属性

字典

属性值对的字典

yourAttributeName

字符串

可以使用 {expression/yourAttributeName} 语法在标题描述字段中引用的属性

例如,如果您有一个指示器以一个测量单位显示一个值,但又希望以其下的另一个单位显示相同的值,则可以创建一个变量来转换现有的值。 通过显示摄氏平均温度的指示器,您可以创建一个华氏温度变量以在表达式中使用,还可以以华氏温度显示您的值。

var fahrenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

然后,您可以将变量作为属性值包括在内,如下所示:

bottomText: fahrenheit,

在底部文本属性中使用此变量将为您提供一个如下所示的表达式,其中平均温度(以摄氏度为单位)显示在指示器的中间文本中,华氏温度值显示在底部文本中:

var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

return {
	topText: 'Average Temperature',
	middleText: Floor($datapoint.avg_Temperature),
	bottomText: farenheit,
}

启用指示器中的高级格式化

要在指示器元素中启用高级格式化,请执行以下操作:

  1. 在指示器的配置窗口中,单击指示器选项卡。
  2. 高级格式化部分,单击启用
    注:
    启用高级格式化后,系统定义的设置(如颜色输入)将不可用。 这些配置是在您的表达式中创建的。 如果在启用高级格式化前输入值,则它们会自动添加到您的表达式中。
  3. 在编辑器中创建格式化表达式。
    提示:
    如果您需要任何关于 Arcade 函数的帮助,请单击函数旁的信息按钮以查看其他详细信息。
  4. 如果希望表达式按特定间隔运行,例如,如果表达式使用 Now() 函数、启用刷新脚本切换按钮和设置刷新间隔。
  5. 您还可以选择使用语法 {expression/yourAttributeName} 参考标题描述字段中的任意新属性。

格式化表

对于表元素,可以通过启用高级格式化选项使用 Arcade 表达式。 一旦您选择使用高级格式化,则颜色输入、文本对齐方式选项和其他系统定义的属性将变为不可用,且将改为在表达式中进行设置。

该表达式将针对表中的每一行运行,且将用于定义列中每个单元格的内容和格式。 可以使用 Arcade 编辑器中的 $datapoint 全局变量来引用数据点属性。

对于在表配置的数据选项卡上定义的每个字段,cells 字典必须具有一个对应的属性。 例如,在具有区域的类别字段和 Transaction Amounts 值字段的分组值表中,cells 字典将包含两个属性:zonesum_transaction_amounts

下表列出了可以以字典形式从表达式返回的属性:

属性值类型描述

单元格

字典

基于数据选项卡上定义的字段的列名称字典

displayText

字符串

单元格中显示的文本

注:

displayText 属性为必填项。

hoverText

字符串

当鼠标悬停在值上方时显示的文本。

注:

必须先在选项卡中启用悬停文本。

textColor

字符串

单元格文本颜色

backgroundColor

字符串

单元格的背景色

textAlign

字符串

对齐(左 | 居中 | 右)

iconName

字符串

为表定义的图标名称

注:

图标名称将在表达式之外定义。

iconAlign

字符串

图标放置在单元格文本旁边(左 | 右)

iconColor

字符串

图标的填充颜色

iconOutlineColor

字符串

图标的轮廓颜色

您还可以使用高级格式化为表创建条件格式。 例如,如果您有一个用于显示最近修复请求的表,则您可能会希望应用条件格式来区分这些请求的状态。 您可以使用如下所示的变量来创建一个根据状态更改单元格颜色的变量:

var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')

然后,您可以将该变量分配给 backgroundColor 属性,从而使单元格可针对新事件突出显示,并针对关闭事件取消突显。

var statusColor = When(
	$datapoint.status == 'new', 'yellow',
	$datapoint.status == 'closed', lightgray', 'white')

return {
	cells:{
		requests:{
			displayText: <span>${$datapoint.requests}</span>, 
			backgroundColor: statusColor,
			}
		}
	}
注:

表达式不适用于表的汇总行。

启用表中的高级格式化

要在表元素中启用高级格式化,请执行以下操作:

  1. 在表的配置窗口中,单击选项卡。
  2. 高级格式化部分,单击启用
    注:
    启用高级格式化后,系统定义的设置(如颜色输入)将不可用。 这些配置是在您的表达式中创建的。 如果在启用高级格式化前输入值,则它们会自动添加到您的表达式中。
  3. 在编辑器中创建格式化表达式。
    提示:
    如果您需要任何关于 Arcade 函数的帮助,请单击函数旁的信息按钮以查看其他详细信息。
  4. 如果希望表达式按特定间隔运行,例如,如果表达式使用 Now() 函数、启用刷新脚本切换按钮和设置刷新间隔。

定义图标名称

指示器和表元素允许您在元素的配置中包含 SVG 图标。 在使用高级格式化时,系统会在 Arcade 表达式中添加图标。

要向 Arcade 表达式添加图标,请执行以下操作:

  1. Arcade 编辑器下方的图标部分中,单击添加
  2. 选择一个图标或创建一个自定义图标。
  3. 输入图标的名称。
  4. Arcade 表达式中,将您的图标名称作为 iconName 属性的值返回。

颜色值

在表达式中包括颜色值时,必须将其作为字符串返回(用引号括起来)。 未经定义或无效的颜色值将自动使用默认值。 可接受的颜色值类型包括十六进制值、RGB、RGBA、HSL 和 HSLA。 以下是一些示例以及受支持的语法:

  • 十六进制
    • #090
    • #009900
    • #090a
    • #009900aa
  • RGB 和 RGBA
    • rgb(34, 12, 64)
    • rgba(34, 12, 64, 0.6)
  • HSL 和 HSLA
    • hsl(50, 33%, 25%)
    • hsla(50, 33%, 25%, 0.75)