使用海图表

使用 Highcharts 视觉效果创建使用 H ig hcharts 核心库的自定义图表类型和视觉效果。Highcharts 视觉效果为 QuickSight 作者提供了直接访问 High charts API 的权限。

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

有关亚马逊 Highcharts 视觉效果的更多信息 QuickSight，请参阅中的 Highcharts 视觉 QuickStart 指南。DemoCentral

下图显示了中的 Highcharts 图标。 QuickSight

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

Bar chart comparing current and prior year sales across various industries, with Finance showing highest sales.

有关可以使用 Highcharts 视觉效果创建的视觉效果的更多示例 QuickSight，请参阅 Highcharts 演示。

注意事项

在开始在亚马逊中创建 Highcharts 视觉效果之前 QuickSight，请查看适用于 Highcharts 视觉效果的以下限制。

Highch arts Chart 代码 JSON 编辑器不支持以下 JSON 值：
- 函数
- 日期
- 未定义的值
Highcharts 视觉效果不支持指向 GeoJSON 文件或其他图像的链接。
字段颜色不适用于 Highcharts 视觉对象。默认主题颜色适用于所有 Highcharts 视觉效果。

创建 Highcharts 视觉效果

使用以下步骤在亚马逊 QuickSight中创建 Highcharts 视觉效果。

打开 QuickSight 管理控制台。
打开要为其添加 Highcharts 视觉效果的 QuickSight 分析。
在应用程序栏上选择添加，然后选择添加视觉对象。
在视觉类型窗格上，选择 Highcharts 视觉图标。分析表单上会出现一个空的视觉对象，“属性” 窗格在左侧打开。
在 “属性” 窗格中，展开 “显示设置” 部分，然后执行以下操作：
1. 在 “编辑标题” 中，选择画笔图标，输入您希望视觉效果具有的标题，然后选择 “保存”。或者，选择眼球图标来隐藏标题。
2. （可选）在 “编辑字幕” 中，选择画笔图标，输入您希望视觉效果具有的字幕，然后选择 “保存”。或者，选择眼球图标以隐藏字幕。
3. （可选）对于替代文本，添加您希望视觉效果具有的替代文本。
展开 “数据点限制” 部分。在要显示的数据点数中，输入您希望视觉对象显示的数据点数量。Highcharts 视觉效果最多可以显示 10,000 个数据点。
展开图表代码部分，如下图所示。

在图表代码 JSON 编辑器中输入 JSON 架构。编辑器提供上下文帮助和实时验证，以确保您的输入 JSON 配置正确。任何 QuickSight 发现的错误都可以在错误下拉列表中查看。以下示例显示了一个 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
    }
  ]
}

选择 “应用代码”。 QuickSight 将 JSON 架构转换为显示在分析中的视觉对象。要对渲染的视觉效果进行更改，请更新 JSON 架构中的相应属性，然后选择 APPLY CODE。下图显示了使用上一步中的 JSON 架构创建的口红图表。
（可选）打开 “参考” 下拉列表以访问有用的Highctarts参考资料的链接。

如果您对渲染的视觉效果感到满意，请关闭属性窗格。有关可用于配置 Highcharts 视觉效果的 QuickSight 特定表达式的更多信息，请参阅。适用于 Highcharts 视觉效果的亚马逊 QuickSight JSON 表达式语言

交互式海图功能

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

自定义操作

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

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


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

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

交叉视觉突出显示

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

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


{
  "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"]
    }]
  }
}

此配置使用 QuickSight的 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
      ],
    }]
  }
}

场级色彩一致性

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

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

使用热图

海图的 JSON 表达式语言