Skip To Content

设计站点布局

配置站点添加数据后,即可使用站点编辑器来开始设计您的站点。站点编辑器是一个完整的页面编辑器,可为您提供一个默认站点模板,您可以对其进行修改以适合您自己的站点品牌和数据,或者完全将其移除以从头开始。通过使用拖放卡片、设置整体主题以及使用标记或自定义 HTML 自定义页眉页脚设计站点布局

访问站点编辑器

使用站点编辑器开始设计站点或随时返回进行更改。

  1. 登录到 受支持 管理应用程序。
  2. 单击站点选项卡。
  3. 找到您要编辑的站点并选择站点编辑器

配置站点设置

对您的站点进行命名并提供描述等。也可以通过单击站点选项卡访问站点管理器来配置站点设置和功能。

  1. 打开侧面板,然后单击站点信息
  2. 站点名称字段中输入名称。
  3. 关于站点字段中提供一些与站点相关的背景信息。
  4. 通过在自定义收藏夹图标字段粘贴图像 URL 来提供可选收藏夹图标。
  5. 单击以切换打开 Google Analytics
  6. 单击以切换打开自定义底图。可以从下拉菜单中选择所需地图。
  7. 单击自定义面板顶部的功能以打开功能菜单。在此菜单中,可以切换打开可用功能。了解有关中的功能的详细信息。管理站点功能。

标题

提供图像 URL 或使用自定义 CSS 来标记站点顶部的菜单栏。

  1. 打开侧面板,然后单击页眉使用徽标和站点标题输入标题并提供徽标的 URL。
  2. 要为您的站点命名,请选择使用徽标和站点标题,在站点标题文本字段中输入标题,以在站点页眉中放置标题。
  3. 要将图像放置在站点的页眉中,请在徽标 URL 字段中粘贴图像 URL。
  4. 如果您想使用自定义 HTML 或 CSS 标记站点页眉,请选择使用自定义 HTML/CSS
  5. 修改侧面板中的 CSS 框,然后单击应用更改查看您的代码是否产生影响。
警告:

页眉 HTML 不支持嵌入式 JavaScript。脚本标记将被忽略。

注:

要维护站点的功能,请勿编辑或删除我的数据登录区域。

主题

通过选择站点的标题、文本和按钮的颜色来创建站点的主题。

  1. 要为以下任何选项选择颜色,请输入颜色代码,或从颜色代码字段旁边的颜色选取器中选择颜色。
    • 页眉背景颜色将颜色应用于您站点的页眉。
    • 页眉文本颜色应用页眉中所有文本的颜色。
    • 正文背景颜色将颜色应用于您站点的各行。
    • 正文文本颜色应用于您站点上的文本。
    • 提示:

      还可以按行更改文本颜色。

      正文链接颜色将颜色应用于您站点上的任何链接。
    • 按钮背景颜色将颜色应用于您站点上的按钮。
    • 按钮文本颜色应用于您站点中任何按钮上的文本。
  2. 设置颜色后,单击应用更改
  3. 您还可以将字体应用于页眉和站点正文中的文本。
    • 要为站点的正文选择字体,请单击基本字体设置图标。
    • 要更改站点页眉的字体,请单击页眉字体设置图标。
注:

要重新开始或返回默认颜色,请选择主题菜单底部的重置为默认值

布局和卡片

按行和卡片来组织站点或页面的基本布局。卡片必须放置在行中,一行中可以放置的卡片数量没有限制。要编辑任何卡片,请单击设置按钮。要删除任何卡片,请单击删除按钮。以下卡片可用于构建站点:通栏图像Web 地图文本类别联系信息图库iframe事件详细信息事件列表视图视频社交媒体汇总统计数据以及图表

行卡片

使用行可构建站点的整体布局。从站点编辑器中拖放卡片,以使用文本、图像和媒体等其他卡片填充行。

  1. 将行从站点编辑器中拖动到布局上。

    页面上将显示标记以引导您进行操作。

  2. 将鼠标悬停在行上方后,右侧将显示三个按钮:用于在页面周围移动行的箭头、用于编辑的设置按钮以及用于删除行的删除按钮。
  3. 单击设置按钮可以切换到编辑模式。
  4. 通过选择来选择行的布局会在整个页面中显示您的内容,而则会以固定宽度在行内显示内容。
  5. 设置此特定行的文本颜色。
  6. 设置背景颜色(透明为默认选项)或背景图像。
  7. 或者,通过单击图像源并选择上传图像文件或提供图像 URL 来添加图像。两种方案均支持 JPG、JPEG 和 PNG。
    • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像查找并添加文件。最大文件大小为 3 MB。
    • 或者,在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
  8. 如果使用图像文件,您可以单击裁剪按钮并拖动控点来调整裁剪框的大小以进行自定义。裁剪框可通过拖动虚线来重新定位。您还可以通过调整图像下方的滑块进行缩放,并通过在裁剪框内进行单击来重新定位图像。
  9. 添加背景颜色和图像时,您也可以在外观菜单中调整图像透明度,方法为输入百分比值或使用滑块。
  10. 启用固定背景以提供视差效果,使内容采用与背景图像不同的滚动速度。
  11. 或者,设置一个点作为图像焦点,以确保图像在根据不同屏幕尺寸进行调整时始终具有焦点。

通栏卡片

可以在站点内使用通栏添加标题和搜索栏。

  1. 通栏卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 标题副标题输入文本。
  4. 搜索菜单中,单击 显示搜索栏将可选搜索栏添加到通栏中。或者,单击添加按位置搜索功能,为用户添加二级搜索选项以按位置过滤结果。
  5. 或者添加要显示在搜索栏中的占位符文本。
  6. 选项菜单中,输入最小高度的值以设置通栏的高度。值必须大于零。
  7. 背景图像菜单中,选择上传图像文件或提供图像 URL。两种方案均支持 JPG、JPEG 和 PNG。
    • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像查找并添加文件。最大文件大小为 3 MB。
    • 或者,在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
  8. 如果使用图像文件,您可以单击裁剪按钮并拖动控点来调整裁剪框的大小以进行自定义。裁剪框可通过拖动虚线来重新定位。您还可以使用图像下方的滑块调整缩放情况,并通过在裁剪框内进行单击来重新定位图像。
  9. 对于图像上传和图像 URL,您可以选择一个点作为图像焦点,以确保图像在不同屏幕尺寸上显示时始终具有聚焦区域。

搜索卡片

添加搜索栏可帮助用户快速找到共享到站点的内容。

  1. 搜索卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 搜索占位符文本字段中提供占位符文本。例如,可以使用“按关键字搜索”或“查找数据”。
  4. 单击添加“按位置搜索”功能复选框以添加其他搜索栏,用于查询基于位置的搜索。您也可以在位置占位符文本字段中提供占位符文本。

图像卡片

可通过从文件上传图像或提供图像 URL 来添加图像。内部共享图像仅供已登录且属于团队或组织的人员查看。

  1. 图像卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 选择图像源。您可以上传图像文件或提供图像 URL。两种方案均支持 JPG、JPEG 和 PNG。
    • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像查找并添加文件。最大文件大小为 3 MB。
    • 或者,选择图像 URL 并在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
  4. 如果使用图像文件,您可以单击裁剪按钮并拖动控点来调整裁剪框的大小,以对已上传的图像进行自定义。裁剪框可通过单击并拖动虚线来重新定位。您还可以通过调整图像下方的滑块进行缩放,并通过在裁剪框内进行单击来进一步重新定位图像。
  5. 选项菜单中,提供图像替代文本以帮助盲人用户并改善站点的可访问性。
  6. 提供图像超链接,并选择在同一选项卡或新选项卡中打开链接。
  7. 图像标题提供文本并选择文本对齐方式。
  8. 或者,单击缩放图像以进行填充设置图像焦点。焦点可确保在根据不同屏幕调整大小时,图像始终聚焦于所需位置。

Web 地图

显示您站点上的 Web 地图。Web 地图可以私有方式共享。只有属于团队或组织的人员可在登录时进行访问。

  1. Web 地图卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击查找 Web 地图
  4. 通过搜索我的地图我的组织地图所有地图来查找 Web 地图。
  5. 要显示地图的标题,请单击标题切换按钮。
  6. 为您的地图设置高度(以像素为单位)。

文本卡片

格式化文本、添加列表并插入表格。您也可以使用自定义 HTML。

  1. 文本卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 添加文本。
  4. 选择要格式化的文本。格式化选项包括样式(添加标题、代码片段和引号)、粗体、斜体和链接。
  5. 要调整文本对齐方式,请单击段落选项,然后选择对齐方式。您也可以通过选择段落选项,然后选择缩进或减少缩进来缩进或减少缩进一行文本。
注:

可以在行卡片设置中修改文本颜色。

添加项目符号列表或编号列表

  1. 添加文本或选择现有文本。
  2. 选择无序列表以创建项目符号列表。
  3. 选择有序列表以添加编号列表。

插入表格

  1. 单击表格选项。
  2. 选择每行和每列所需的单元格数。
  3. 选择表格的大小后,单击以插入表格。通过单击单元格内部,然后选择插入或删除行或列按钮,可以添加或移除行或列。单击删除按钮可移除整个表格。
注:

要向表格添加标题,请单击表格顶行,然后单击切换表格标题按钮。标题可方便使用辅助技术的用户导航表格的内容。

插入按钮和卡片

  1. 单击插入按钮。
  2. 请从以下选项中选择:
    • 按钮 - 通过提供详细信息的链接来添加行动号召。
    • 宽卡片 - 插入单个卡片以显示内容、详细信息的链接并显示图片。
    • 多个卡片 - 插入多个卡片。
注:

通过在卡片的代码视图内提供托管图像的链接,可以对图片进行编辑。

添加 HTML

可以使用 HTML 来自定义文本的外观。

  1. 文本卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击代码视图选项。
警告:

出于安全目的,文本卡片不支持嵌入式 JavaScript。脚本标记将被忽略。

允许以下 HTML 元素:

'a', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
 'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
 'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
 'ul', 'center', 'style', 'div', 'span'

允许这些元素的以下属性:


 All supported HTML elements allow : ['class', 'style'], 'a' : ['href', 'title', 'target', 'data-toggle', 'data-target', 'name'], 'blockquote': ['cite'],	'button'    : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss'], 'col' : ['span', 'width'], 'colgroup' : ['span', 'width'],	'div' : ['data-show', 'data-target', 'data-toggle'] 'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ], 'ol' : ['start', 'type'], 'q' : ['cite'], 'table' : ['summary', 'width', 'class'], 'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'], 'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
 'ul' : ['type']

类别卡片

使用类别可对站点上的数据集进行分组,以便相关人员快速浏览可用内容。

  1. 类别卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 编辑类别的链接文本。
  4. 选择使用标记查询使用群组

    这将决定用户单击此类别时,搜索结果中将返回的数据集。

    • 标记 - 输入标记查询。.搜索结果中将返回在其相应企业级门户项目上具有此匹配标记的所有数据集。
    • 群组 - 选择一个群组。搜索结果中将返回该群组中的所有数据集。
  5. 从库中选择一个图标:
    1. 选择选择图标
    2. 从模式中选择一个图标并单击选择

      此图标将显示在侧面板中。

    3. 单击图标右侧的灰色框以选择图标的颜色。
  6. 使用您自己的图标:
    1. 提供图标的 URL。
    2. 提供图标的替代文本,以帮助盲人用户并改善站点的可访问性。
  7. 单击返回到站点编辑器可返回到主侧面板。
提示:

自定义图标应保存为 .svg 或透明 .png 文件。将对图标进行缩放以适应 120x120 像素。

联系信息卡片

提供联系信息以向数据所有者发送电子邮件。

  1. 联系信息卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 提供联系电子邮件地址和电子邮件主题行。

    当用户单击主页上的电子邮件时,其电子邮件编辑器将自动打开。

  4. 单击返回到站点编辑器可返回到主侧面板。

图库卡片

使用图库卡片展示应用程序、仪表盘、数据集、站点、页面、Web 地图和文档。图库卡片会自动从组织的 ArcGIS Online 群组中检索这些项目。将内容添加到您的组织或特定群组时,新的应用程序切片将显示在您的站点上,无需对布局进行编辑。

  1. 图库卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击显示下拉菜单并选择内容显示方式(按类型或手动选择各个项目)以选择卡片上显示的内容。
    • 要基于类型显示内容,请单击动态,然后选择应用程序仪表盘数据集站点页面Web 地图文档。要进行其他设置,您需要选择显示的卡片数量,以及在哪一群组或标签中对其进行查询。
      提示:

      应用程序中包括以下项目:应用程序、表单 (Survey123) 以及 Web 制图应用程序。支持的文档类型包括 PDF、Microsoft Excel、Microsoft PowerPoint、iWork Keynote、iWork Pages、iWork 文档 和 Visio 文档。

    • 要显示混合内容,请单击手动,然后单独选择内容,方法为单击添加内容,然后选择属于组织的应用程序、数据集、站点和页面的任意组合。
      提示:

      如果选择手动显示,则可以在站点编辑器中调整卡片列表以重新排列卡片在布局中的显示顺序。单击卡片名称可将其拖放到列表中的新位置。

  4. 样式下拉菜单中,通过以下选项选择图库卡片的外观:
    • 图像 - 选择图标或缩略图。ArcGIS Online站点编辑器站点ArcGIS Online我的内容编辑缩略图ArcGIS Online项目详细信息内容概述编辑缩略图项目详细信息
    • 拐角 - 选择直角或圆角。
    • 按钮文本 - 可在文本框中输入新名称,以对浏览按钮进行重命名。

Iframe 卡片

嵌入式 iframe 和外部资源。

警告:

请勿嵌入来自其他网站的 iframe 代码。只能粘贴到要嵌入的 URL 中。

  1. iframe 卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 提供 iframe URL 和 iframe 高度。
  4. 为您的 iframe 添加标题。
  5. 通过打开自动启用滚动功能。
  6. 单击应用
注:

使用 HTTP 的 iframe URL 将不会显示在使用 HTTPS 的站点编辑器中。保存并查看您的站点以观察您的 iframe。

显卡

可将显卡添加至嵌入式 YouTubeVimeoFacebook 视频中。

  1. 媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 视频 URL 字段中粘贴来自 FacebookVimeoYouTube 的视频 URL。
  4. 根据视频来源的不同,将显示不同的其他选项,以用于配置视频显示情况:
    • 对于 Facebook 视频,选择显示帖子文本可显示点赞、评论、分享和其他相关文本的数量。选择始终显示标题可显示视频标题。
    • 对于 Vimeo 视频,选择显示视频标题显示视频所有者显示视频所有者缩略图循环视频回放
    • 对于 YouTube 视频,选择显示 Youtube 标识循环视频回放
  5. 单击视频 URL 旁边的复制按钮将链接保存至剪贴板,以便在应用程序的其他位置重用。

社交媒体卡片

使用 URL 可直接在您的站点上分享社交媒体帖子和时间轴。

Facebook 帖子

显示单个帖子以突出显示特定内容。

  1. 社交媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 社交媒体帖子 URL 字段中,粘贴任何公开分享的 Facebook 帖子的 URL。要复制正确的 URL,请单击帖子的时间戳(帖子左上角显示的日期或时间),然后在返回编辑站点之前,在浏览器中复制新的 URL。
  4. 或者,单击显示帖子文本切换按钮以显示与帖子相关的文本。

Facebook 时间轴

显示 Facebook 页面时间轴事件以及消息以进行进一步浏览。

  1. 社交媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 社交媒体帖子 URL 字段中,粘贴任何公开分享的 Facebook 页面的 URL。
  4. 或者,单击切换以下选项的任意组合:
    • Facebook 页面选项卡将在页面标题下显示时间轴选项卡。如果要将时间轴与事件和/或消息一同共享,请单击此选项。
    • 事件将仅显示页面事件视图的列表视图。
    • 消息使相关人员能够使用 Facebook Messenger 输入消息并将其发送给 Facebook 页面的管理员。
    • 使用大标题可增大页面标题的尺寸,并添加发送消息按钮以将相关人员与 Facebook Messenger 链接在一起。
    • 显示封面照片可显示页面的封面照片。

Twitter 帖子

显示单个 Twitter 帖子以突出显示特定推文。

  1. 社交媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 社交媒体帖子 URL 字段中,粘贴任何公开分享的 Twitter 帖子的 URL。要获取单个推文的链接,请单击帖子右上角的“更多”图标,然后选择将链接复制到推文
  4. 或者,单击切换选项菜单中以下选项的任意组合:
    • 显示深色主题可转换显示颜色。
    • 选择推文宽度可选择帖子的显示尺寸。选项包括
  5. 选择推文位置可选择对齐方式:左对齐居中右对齐

Twitter 时间轴

显示可滚动的 Twitter 时间轴。

  1. 社交媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 社交媒体帖子 URL 字段中,粘贴任何公开分享的 Twitter 时间轴的 URL。
  4. 或者,单击切换选项菜单中以下选项的任意组合:
    • 选择集合高度:选择默认可保持当前显示效果,而选择展开可显示更多时间轴。
    • 推文限制可设置时间轴上显示的推文数量。
    • 显示深色主题可转换显示颜色。
    • 显示标题可显示标题。同样,选择显示页脚可显示页脚。
    • 显示边框可显示时间轴周围的边框。
    • 显示背景可移除背景。

Twitter 集合

在站点上显示 Twitter 集合。有关如何创建 Twitter 集合的信息,请访问有关如何精选推文集合Twitter 开发人员文档。

  1. 社交媒体卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 社交媒体帖子 URL 字段中,粘贴任何公开分享的 Twitter 集合的 URL。
  4. 或者,单击切换选项菜单中以下选项的任意组合:
    • 推文限制可以设置集合中显示的推文数量限制。
    • 扩展的高度可以同时显示多个集合。
    • 显示深色主题可以将文本颜色更改为白色并应用深灰色背景。
    • 显示标题可以显示集合的标题。同样,选择显示页脚将显示页脚,可提供嵌入在 Twitter 上查看的链接。
    • 显示边框可在卡片周围显示边框。
    • 显示背景可将白色背景应用于卡片。如果同时选择了显示深色主题,则将应用深灰色背景。

汇总统计数据卡片

使用汇总统计数据可以快速提供关键绩效指标等的数据。可以通过数据集查询来生成汇总统计数据,更新数据集时将自动对其进行更新。仅具有访问权限的人员可在登录时汇总使用内部共享数据生成的统计数据。

  1. 汇总统计数据卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击 (+) 添加数据,随即将打开项目选择器来查找您选择的数据服务。编辑站点时,统计数据下方的源链接将链接到数据集预览页面的项目详细信息页面。
  4. 对于 统计字段,从选定的服务中选择一个字段。该字段将用于后续步骤。
  5. 对于 统计类型,选择要针对所选字段执行的操作类型。
    • 对于文本和日期字段,可以在计数、最小值和最大值之间进行选择。
    • 对于数值字段,可以在计数、总和、最小值、最大值、平均标准差和方差之间进行选择。
  6. 可以选择向统计数据添加过滤器:
    1. 选择适用于过滤器的属性。
    2. 选择添加
    3. 选择新的属性框以显示过滤器输入。输入框将根据字段类型的不同而变化。
    4. 输入所需过滤器。
    5. 单击过滤器框外部或者按键盘上的 Enter 键。
  7. 标题文本框中,输入标题。
  8. 或者,在尾随文本中输入文本以提供详细统计信息,然后更改统计数据本身的强调颜色设置。

图表卡片

可以直接从数据集创建简单图表,或者输入您自己的图表 JSON 以创建自定义图表。使用私有共享数据创建的图表仅限有权访问您的团队或组织的人员在登录时查看。

条形图

可以通过对所选数据集的查询来创建条形图,更新数据集时将自动对其进行更新。

  1. 图表卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 默认情况下,条形图处于选中状态。
  4. 单击 (+) 添加数据
  5. 从可用的数据服务中选择一个项目。
  6. 对于选择类别属性,从数据中选择主要图表项目。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  7. 也可选择值属性以选出作为类别属性值度量的数字字段。选中后,该字段的默认统计运算为“总和”。您可以使用选择值属性选择器右侧的下拉菜单更改统计运算。值属性支持最小值、最大值、总和、平均值和计数。通过选择计数,取消选中值属性(因为不需要额外的字段来计数类别属性)。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  8. 单击选项菜单以使用以下设置来自定义图表的显示:
    • 排序选项使您可以选择属性数据的显示方式。选择一个属性,然后单击属性旁边的排序图标以按升序或降序显示数据。
    • 高度 (px) 文本字段中设置图表的高度值(像素)。
    • 单击图表标题旁边的切换按钮,以选择显示图表的标题。如果显示标题,请在相应的文本字段中输入名称,然后选择对齐方式。
    • 输入颜色代码来设置主图表颜色,或单击颜色选取器选择颜色。
    • 类别标注值标注中输入文本。

饼图

可以通过对所选数据集的查询来创建饼图,更新数据集时将自动对其进行更新。

  1. 图表卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击圆形饼图按钮以选择饼图。
  4. 单击 (+) 添加数据
  5. 从可用的数据服务中选择一个项目。
  6. 对于选择类别属性,从数据中选择主要图表项目。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  7. 或者,在选择值属性中选择作为类别属性值度量的数值字段。选中后,该字段的默认统计运算为总和。您可以单击选择值属性选择器右侧的下拉箭头更改统计运算设置。值属性支持最小值最大值总和平均值计数。通过选择计数,取消选中值属性(因为不需要额外的字段来计数类别属性)。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  8. 单击选项菜单以使用以下设置来自定义图表的显示:
    • 排序选项使您可以选择属性数据的显示方式。选择一个属性,然后单击属性旁边的排序图标以按升序或降序显示数据。
    • 高度 (px) 文本字段中设置图表的高度值(像素)。
    • 单击图表标题旁边的切换按钮,以选择显示图表的标题。如果显示标题,请在相应的文本字段中输入名称,然后选择对齐方式。
    • 为工具提示中每个扇形标注设置类别标注文本,为工具提示中度量标注设置值标注文本。

折线图

可以通过对所选数据集的查询来创建折线图,更新数据集时将自动对其进行更新。

  1. 图表卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击折线图按钮以选择折线图。
  4. 单击 (+) 添加数据
  5. 从可用的数据服务中选择一个项目。
  6. 对于选择类别属性,从数据中选择主要图表项目。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  7. 或者,在选择值属性中选择作为类别属性值度量的数值字段。选中后,该字段的默认统计运算为总和。您可以单击选择值属性选择器右侧的下拉箭头更改统计运算设置。值属性支持最小值最大值总和平均值计数。通过选择计数,取消选中值属性(因为不需要额外的字段来计数类别属性)。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  8. 单击选项菜单以使用以下设置来自定义图表的显示:
    • 排序选项使您可以选择属性数据的显示方式。选择一个属性,然后单击属性旁边的排序图标以按升序或降序显示数据。
    • 高度 (px) 文本字段中设置图表的高度值(像素)。
    • 单击图表标题旁边的切换按钮,以选择显示图表的标题。如果显示标题,请在相应的文本字段中输入名称,然后选择对齐方式。
    • 输入颜色代码来设置主图表颜色,或单击颜色选取器选择颜色。
    • 为工具提示中每个点标注设置类别标注文本,为工具提示中度量标注设置值标注文本。

散点图

可以通过对所选数据集的查询来创建散点图,更新数据集时将自动对其进行更新。

  1. 图表卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 单击散点图按钮选择折线图。
  4. 单击 (+) 添加数据
  5. 从可用的数据服务中选择一个项目。
  6. 对于选择 X 轴属性,从数据中选择主要图表项目。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  7. 选择 Y 轴属性字段选择一个属性,并选择作为类别属性值度量的数值字段。

    数字和字符串字段可在图表中使用。默认情况下,当您选中某一类别属性时,生成的图表将成为此属性的计数。

  8. 单击选项菜单以使用以下设置来自定义图表的显示:
    • 排序选项使您可以选择属性数据的显示方式。选择一个属性,然后单击属性旁边的排序图标以按升序或降序显示数据。
    • 高度 (px) 文本字段中设置图表的高度值(像素)。
    • 单击图表标题旁边的切换按钮,以选择显示图表的标题。如果显示标题,请在相应的文本字段中输入名称,然后选择对齐方式。
    • 输入颜色代码来设置主图表颜色,或单击颜色选取器选择颜色。
    • 设置要在图表中显示的 X 轴标注Y 轴标注

JSON 图表

可以使用特定图表规范通过 JSON 创建自定义图表。

  1. 图表卡片拖动到现有行中。
  2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
  3. 选择 JSON 切片。
  4. JSON 图表规范字段中输入 JSON。
  5. 或者,可以在选项部分中启用/禁用和自定义图表标题高度(以像素为单位)设置。

JSON 规范

输入自定义 JSON 可创建利用 Cedar 库的自定义图表。规范包含以下组件:

数据集

数据集数组可以指定 ArcGIS 要素服务 URL 和查询参数。有关查询参数的详细信息,请参阅 REST API 文档。

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

系列

系列数组用于指定服务响应中字段之间的映射以及图表的视觉特性(x,y 轴、散点图的颜色和大小以及饼图的 半径)。

{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }

覆盖

覆盖属性用于指定整个图表的视觉覆盖,例如颜色或位置。

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

规范

规范属性用于输入完全自定义图表的完整 Cedar 规范。查看现有图表规范的示例

示例

条形图:
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}

水平条形图:
{
  "type": "bar-horizontal",  "datasets": [    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",      "name": "Number_of_SUM",      "query": {
        "orderByFields": "Number_of_SUM DESC",        "groupByFieldsForStatistics": "Type",        "outStatistics": [          {
            "statisticType": "sum",            "onStatisticField": "Number_of",            "outStatisticFieldName": "Number_of_SUM"
          }
        ]      }
    }
  ],  "series": [    {
      "category": {"field": "Type", "label": "Type"},      "value": {"field": "Number_of_SUM", "label": "Number of Students"},      "source": "Number_of_SUM"
    }
  ],  "overrides": {
    "categoryAxis": {
      "labelRotation": -45    }
  }
}

已分组条形图:

请注意:每个 系列将匹配一个群组。

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

散点 图:
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

气泡散点 图:
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

时间表:

请注意:类别必须为日期时间字段。

 {
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

页脚

站点编辑器的默认设置不包含页脚。您必须创建自定义页脚,才能使站点中所有页面的页脚保持一致。

  1. 页脚部分,选择 自定义

    页面上将显示默认页脚,侧面板上将显示 CSS 框。

  2. 单击页脚右下角的设置按钮可以编辑 HTML。
  3. 再次单击设置按钮可以查看更改。
  4. 修改侧面板中的 CSS 框,然后单击应用更改可以查看对 HTML 的影响。
提示:

页脚 HTML 不支持嵌入式 JavaScript。脚本标记将被忽略。