操作方法：在 Arcade 表达式中使用 HTML 来格式化 ArcGIS Dashboards 中的表值

描述

可以在 ArcGIS Dashboards 中结合使用 HTML 和 ArcGIS Arcade 表达式，以自定义数据在表元素中的显示方式。本文提供了将粗体文本应用于教育机构类别及其相应学生总数的步骤。同时在 ArcGIS Dashboards 中为所有教育机构名称配置了缩进 20 像素。

下图显示了没有粗体和缩进文本格式的表元素。

解决方案或解决方法

打开 ArcGIS Dashboards 项目。单击仪表盘工具栏上的视图，然后单击元素旁的选项。单击配置。

单击值以打开“值选项”菜单，然后单击启用。

在表达式窗口中指定以下 Arcade 表达式。 HTML 和 Arcade 表达式将特定字段值配置为粗体或者缩进 20 像素。有关更多文本格式示例，请参阅 W3Schools：HTML 样式和 W3Schools：HTML 文本格式。

// Edit the desired variable name and required field name accordingly
var <variableName1> = Concatenate('<strong>'+$datapoint.<fieldName1>+'</strong>')
var <variableName2> = Concatenate('<div style="padding-left: 20px;">'+$datapoint.<fieldName1>+'</div>')
var <variableName3> = Concatenate('<strong>'+Text($datapoint.<fieldName2>)+'</strong>')

var <variableName4> = When($datapoint.<fieldName1> == '<textValue1>', <variableName1>, $datapoint.<fieldName1> == '<textValue2>', <variableName1>, $datapoint.<fieldName1> == '<textValue3>', <variableName1>, $datapoint.<fieldName1> =='<textValue4>', <variableName1>, <variableName2>)>
var <variableName5> = When(Text($datapoint.<fieldName2>) == '<numericValue1>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue2>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue3>', <variableName3>, Text($datapoint.<fieldName2>) =='<numericValue4>', <variableName3>, Text($datapoint.<fieldName2>))
return {
  cells: {
    <fieldName1>: {
      displayText : <variableName4>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    <fieldName2>: {
      displayText : <variableName5>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}

以下代码块演示了完整工作表达式。在本示例中，EDUCATION 字段的字段值类别（小学、初中、高中以及学院或大学）配置为粗体，而所有其他字段值缩进 20 像素。 STUDENT 字段的相应数值字段值也设置为粗体。

// Edit the desired variable name and required field name accordingly
var bldE = Concatenate('<strong>'+$datapoint.EDUCATION+'</strong>')
var txaE = Concatenate('<div style="padding-left: 20px;">'+$datapoint.EDUCATION+'</div>')
var bldS = Concatenate('<strong>'+Text($datapoint.STUDENT)+'</strong>')

var educ = When($datapoint.EDUCATION == 'Elementary', bldE, $datapoint.EDUCATION == 'Middle or junior high', bldE, $datapoint.EDUCATION == 'High school', bldE, $datapoint.EDUCATION =='College or university', bldE, txaE)
var stud = When(Text($datapoint.STUDENT) == '41626', bldS, Text($datapoint.STUDENT) == '42283', bldS, Text($datapoint.STUDENT) == '47971', bldS, Text($datapoint.STUDENT) =='59081', bldS, Text($datapoint.STUDENT))

return {
  cells: {
    EDUCATION: {
      displayText : educ,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    STUDENT: {
      displayText : stud,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}