将表格数据添加到您的 HTML 模板 | Qlik Cloud帮助
跳到主要内容 跳到补充内容

将表格数据添加到您的 HTML 模板

您可以将应用程序中图表的源表作为表格数据添加到您的 HTML 报表模板中。表格数据可以作为整个表或作为一个或多个单独的列添加。无论您是将图表作为单个表标签添加,还是作为一组单独的列添加,您创建的底层对象都是一个表。该表作为对象添加到对象面板中,您可以随时返回该面板进行编辑和重复使用。

具有直表类型超立方的图表可以作为表格数据添加。当您将图表作为表添加时,表示图表数据的底层字段将作为列添加到报表中。

您可以在对象面板的 表 菜单中添加表格数据。

选择表时,通过单击 重新加载 刷新应用程序中可用表的列表。

添加整个图表

您可以使用单个标签以表格形式添加整个图表。图表数据将作为直表插入到报表中。

  1. HTML 设计器中,将光标放置在代码中要插入表的位置。

  2. 单击对象面板中的 表

    HTML 设计器内对象面板中的菜单

    HTML 设计器中的“表”菜单,您可以从中修改已添加的现有表,或添加新表
  3. 单击添加表。将显示可用工作表的列表。

  4. 展开包含要作为表添加的图表的工作表。如果需要,您可以搜索图表的名称以优化工作表列表。

    在添加图表之前,您可以通过单击图表的名称来预览它。

  5. 单击图表旁边的 加号 图标。

  6. 在下拉菜单中,选择。这会将图表作为单个项目插入到模板中。

    选择要作为表添加的图表

    选择要用作表源的图表
  7. 在对象面板中,您可以调整:

    • 名称:为表提供一个唯一的名称,以便您稍后识别它。

    • 描述(可选):如果需要,向对象添加描述。

    • 筛选器:单独向对象添加最多一个筛选器。这允许您自定义表中使用的数据,而不会影响其他模板对象中使用的数据。单击管理筛选器以配置您要使用的报表筛选器。有关对象级筛选器的更多信息,请参见 在报表模板中使用对象级筛选器

    将表作为单个标签添加的模板设计图面

    在 HTML 模板中显示的表示整个表的标签
  8. 您可以在对象面板中调整表的属性。有关表格数据格式属性的信息,请参见 格式化表格 HTML 数据的属性

  9. 您可以随时重复使用表对象。在选项面板中打开 表,然后单击 向右箭头 以打开对象。单击添加表标签以再次添加表。

按列添加图表

图表也可以作为一组单列以表格形式添加。这允许在报表模板中增加对格式的控制。

图表数据将作为直表插入到报表中。

  1. HTML 设计器中,将光标放置在代码中要插入表列的位置。

  2. 单击对象面板中的 表

    HTML 设计器内对象面板中的菜单

    HTML 设计器中的“表”菜单,您可以从中修改已添加的现有表,或添加新表
  3. 单击添加表。将显示可用工作表的列表。

  4. 展开包含要作为表添加的图表的工作表。如果需要,您可以搜索图表的名称以优化工作表列表。

    在添加图表之前,您可以通过单击图表的名称来预览它。

  5. 单击图表旁边的 加号 图标。

  6. 在下拉菜单中,选择单独的列

    选择要按列作为表添加的图表

    选择要用作表源的图表,并将其作为一组一个或多个单独的列添加
  7. 选择要添加的列,或单击全部以插入图表中的所有列。

  8. 图表将作为 table 元素添加到模板中,每列在其中的 td 元素中表示。如果您添加单个列,则该列将作为单个项目添加,其方式与添加整个表的方式相同

    在对象面板中,您可以调整:

    • 名称:为表提供一个唯一的名称,以便您稍后识别它。

    • 描述(可选):如果需要,向对象添加描述。

    • 筛选器:单独向对象添加最多一个筛选器。这允许您自定义表中使用的数据,而不会影响其他模板对象中使用的数据。该筛选器应用于来自同一源表的所有列。

      单击管理筛选器以配置您要使用的报表筛选器。有关对象级筛选器的更多信息,请参见 在报表模板中使用对象级筛选器

    将表作为一系列单独列添加的模板设计图面

    表示作为一系列单独列添加的图表的项目
  9. 您可以在对象面板中调整表的其他属性。有关表格数据格式属性的信息,请参见 格式化表格 HTML 数据的属性

  10. 您可以随时重复使用表对象。在选项面板中打开 表,然后单击 向右箭头 以打开对象。单击添加表标签以将表的新实例作为单个项目添加,或者创建一个空白表结构并将每个列引用单独添加到 td 元素中。

这组列被视为单个表对象。

从图表添加更多列

添加到按列添加的图表中

在单独添加表的一些列之后,您可以随时添加更多列。所需的过程取决于原始表是包含一列,还是包含两列或更多列。

具有一个现有列的表

如果您有一个仅单独添加了一列的表,则添加新列的过程会更加复杂。在某些情况下,从一开始就配置多列来重新创建对象可能会更容易。但是,您仍然可以向单列表添加其他列。

  1. 在设计图面上,将以下空白表元素粘贴到空白区域:

      <table cellspacing="0" style="border-collapse: collapse">
      <tbody><tr>
      <td></td><td></td><td></td>
      </tr>
      </tbody></table>
  2. 剪切现有单独列的项目,并将其粘贴到您刚刚添加的其中一个 td 元素中。例如:

      <table cellspacing="0" style="border-collapse: collapse">
      <tbody><tr>
      <td>%%ProductCategory%%</td><td></td><td></td>
      </tr>
      </tbody></table>
  3. 将光标放在现有的单独列项目上。

    在对象面板中,将打开菜单并展开该列。

  4. 下找到您要添加的列。展开它,配置其属性,然后单击添加列标签

  5. 对要从源表添加的每个新列重复步骤 3 到 4。您将需要根据需要添加新的 <td></td> 项目,并在完成之前删除所有未使用的(空)<td></td> 项目。

执行此过程时,该表仍然是可从对象面板中获取的同一表对象。

具有两列或更多现有列的表

  1. 在 HTML 代码中,选择要插入列的位置正左侧列的 td 元素。

    在对象面板中,将打开菜单并展开该列。

  2. 通过将以下内容粘贴到您的模板中来创建一个新的 td 元素:

    <td></td>

    然后,将光标放在其开始和结束标签之间。

  3. 在对象面板中,配置列的格式属性,然后单击添加列标签

    对该列的引用将插入到空白的 td 元素中。

从作为整个表添加的图表中

您可以添加已作为单个表项目添加的图表的新实例。您还可以添加最初作为单个表项目添加的单独列的实例。

  1. HTML 设计器中,将光标放置在代码中要插入内容的位置。

  2. 单击对象面板中的 表

    将打开菜单。

  3. 单击现有对象旁边的 向右箭头

  4. 执行以下选项之一:

    1. 要将表的新实例作为单个项目添加,请单击添加表标签

    2. 要添加单列,请单击展开列。配置列属性并单击添加列标签。如果将多个列添加到结构中,您将需要首先创建一个空白表元素。请参见 具有一个现有列的表

本页面有帮助吗?

如果您发现此页面或其内容有任何问题 – 打字错误、遗漏步骤或技术错误 – 请告诉我们!