使用 Highcharts - Amazon Quick Suite
注意事项创建 Highcharts 视觉对象交互式 Highchart 功能
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

使用 Highcharts

使用 Highcharts 视觉对象来创建使用 Highcharts Core 库的自定义图表类型和视觉对象。Highcharts 视觉效果让 Quick Suite 作者可以直接访问 High charts API。

要配置 Highcharts 视觉对象，Quick Suite 作者需要在 Quick Suite 中的视觉对象中添加 Highcharts JSON 架构 作者可以使用 Quick Suite 表达式来引用 Quick Suite 字段，以及他们用来生成 Highcharts 视觉效果的 JSON 架构中的格式选项。JSON 图表代码编辑器为自动完成和实时验证提供上下文帮助，以确保输入 JSON 架构配置正确。为了维护安全性，Highcharts 可视化编辑器不接受 CSS 或 HTML 代码输入。 JavaScript

有关 Amazon Quick Suite 中 Highcharts 视觉效果的更多信息，请参阅中的 Highcharts 视觉指南 QuickStart 。DemoCentral

下图显示了在 Quick Suite 中 Highcharts 视觉对象的图表代码 JSON 编辑器中配置的口红图表。

有关可以在 Quick Suite 中使用 Highcharts 视觉效果创建的视觉效果的更多示例，请参阅 H igh charts 演示。

注意事项

在开始在 Amazon Quick Suite 中创建 Highcharts 视觉效果之前，请查看以下适用于 Highcharts 视觉效果的限制。

  • Highcharts 图表代码 JSON 编辑器不支持以下 JSON 值：

    • 函数

    • 日期

    • 未定义的值

  • Highcharts 视觉对象不支持指向 GeoJSON 文件或其他图像的链接。

  • 字段颜色不适用于 Highcharts 视觉对象。默认主题颜色适用于所有 Highcharts 视觉对象。

创建 Highcharts 视觉对象

使用以下步骤在 Amazon Quick Suite 中创建 Highcharts 视觉效果。

  1. 打开 Quick Suite 控制台。

  2. 打开要为其添加 Highcharts 视觉效果的 Quick Suite 分析。

  3. 在应用程序栏上选择添加，然后选择添加视觉对象。

  4. 在视觉对象类型窗格中，选择 Highcharts 视觉对象图标。分析工作表上会出现一个空视觉对象，并且左侧打开属性窗格。

  5. 在属性窗格中，展开显示设置部分并执行以下操作：

    1. 对于编辑标题，选择画笔图标，输入希望视觉对象具有的标题，然后选择保存。或者，选择眼球图标以隐藏标题。

    2. （可选）对于编辑副标题，选择画笔图标，输入希望视觉对象具有的副标题，然后选择保存。或者，选择眼球图标来隐藏副标题。

    3. （可选）对于替代文本，添加希望视觉对象具有的替代文本。

  6. 展开数据点限制部分。对于要显示的数据点数量，输入希望视觉对象显示的数据点数。Highcharts 视觉对象最多可显示 1 万个数据点。

  7. 展开图表代码部分。

  8. 在图表代码 JSON 编辑器中输入 JSON 架构。该编辑器会提供上下文帮助和实时验证，以确保输入 JSON 配置正确。Quick Suite 发现的任何错误都可以在错误下拉列表中查看。下面的示例展示了一个 JSON 架构，它创建了一个口红图表，显示了各行业当年的销售额。

    {
  "xAxis": {
    "categories": ["getColumn", 0]
  },
  "yAxis": {
    "min": 0,
    "title": {
      "text": "Amount ($)"
    }
  },
  "tooltip": {
    "headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
    "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  },
  "plotOptions": {
    "column": {
      "borderWidth": 0,
      "grouping": false,
      "shadow": false
    }
  },
  "series": [
    {
      "type": "column",
      "name": "Current Year Sales",
      "color": "rgba(124,181,236,1)",
      "data": ["getColumn", 1],
      "pointPadding": 0.3,
      "pointPlacement": 0.0
    }
  ]
}

  9. 选择应用代码。Quick Suite 将 JSON 架构转换为显示在分析中的视觉对象。要更改呈现的视觉对象，请更新 JSON 架构中的相应属性，然后选择应用代码。

  10. （可选）打开参考下拉列表以访问有用的 Highctarts 参考资料的链接。

当您对呈现的视觉对象感到满意时，请关闭属性窗格。有关可用于配置 Highcharts 视觉效果的 Quick Sight 特定表达式的更多信息，请参阅适用于 Highcharts 视觉效果的 Amazon Quick Suite J。

交互式 Highchart 功能

Amazon Quick Sight 中的 Highchart 可视化支持自定义操作、突出显示和自定义字段颜色一致性，使您可以创建与其他 Quick Sight 视觉效果无缝集成的交互式且视觉上有凝聚力的图表。

自定义操作

通过自定义操作，您可以为 Highchart 可视化效果中的任何数据点定义特定行为。此功能与 Quick Sight 的现有操作框架无缝集成，使您能够创建响应用户点击的交互式图表。该系统目前支持单个数据点选择，让您可以精确控制用户交互。自定义操作可以在各种图表类型中实现，包括折线图、条形图和堆叠条形图等。

要实现自定义操作，需要修改 Highcharts JSON 配置。向您的系列配置添加一个事件块，指定点击事件和相应的操作。例如：

{
  "series": [{
    "type": "line",
    "data": ["getColumn", 1],
    "name": "value",
    "events": {
      "click": [
        "triggerClick", { "rowIndex": "point.index" }
      ]
    }
}]

此配置可在图表的数据点上启用点击事件，从而允许 Quick Sight 根据所选数据处理自定义操作。

跨视觉对象突出显示

跨视觉对象突出显示通过在不同图表之间创建视觉对象连接来增强控制面板的交互性。当用户选择一个图表中的元素时，其他视觉对象中的相关元素会自动突出显示，而不相关的元素则会变暗。此功能可帮助用户快速识别多个可视化效果之间的关系和模式，从而提高数据理解和分析能力。

要启用跨视觉对象突出显示并保持字段颜色一致性，请在 Highcharts JSON 配置中使用 quicksight 子句。该子句充当 Highcharts 渲染和 Quick Suite 视觉交互系统之间的桥梁。下面是有关如何设置的示例：

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case", 
        ["dataMarkMatch", ["getColumnName", 0], "series.name"],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
      "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"]
    }]
  }
}

此配置使用 Quick Sight 的 JSON 表达式语言，根据用户交互和预定义的配色方案动态修改不透明度和颜色等视觉属性。

对于更复杂的场景，您可以根据多种条件设置突出显示。这使得您的可视化效果具有更细致的交互性。以下示例根据季度或星期几突出显示元素：

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case",
        ["||",
          ["dataMarkMatch", "quarter", "series.name"],
          ["dataMarkMatch", "day_of_week", "point.name"]
        ],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
    }]
  }
}

字段级颜色一致性

保持控制面板的视觉连贯性对于有效的数据解释至关重要。字段级颜色一致性功能可确保分配给特定维度的颜色在控制面板的所有视觉对象中保持不变。这种一致性有助于用户快速识别和跟踪不同图表类型和视图中的特定数据类别，从而增强整体用户体验和数据理解。