使用 Highcharts - Amazon QuickSight
注意事项创建 Highcharts 视觉对象交互式 Highchart 功能

使用 Highcharts

使用 Highcharts 视觉对象来创建使用 Highcharts Core 库的自定义图表类型和视觉对象。Highcharts 视觉对象为 QuickSight 作者提供对 Highcharts API 的直接访问。

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

有关 Amazon QuickSight 中的 Highcharts 视觉对象的更多信息，请参阅 DemoCentral 中的 Highcharts 视觉对象快速入门指南。

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

Bar chart icon enclosed in curly braces with three lines of text below.

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

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

有关可以在 QuickSight 中使用 Highcharts 视觉对象创建的视觉对象的更多示例，请参阅 Highcharts 演示。

注意事项

在 Amazon QuickSight 中开始创建 Highcharts 视觉对象之前，请查看适用于 Highcharts 视觉对象的以下限制。

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

    • 函数

    • 日期

    • 未定义的值

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

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

创建 Highcharts 视觉对象

使用以下过程在 Amazon QuickSight 中创建 Highcharts 视觉对象。

  1. 打开 QuickSight 控制台。

  2. 打开想要添加 Highcharts 视觉对象的 QuickSight 分析。

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

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

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

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

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

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

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

  7. 展开图表代码部分，如下图所示。

    JSON configuration for a Highcharts line chart with x-axis categories and series data.

  8. 在图表代码 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
    }
  ]
}

  9. 选择应用代码。QuickSight 将 JSON 架构转换为分析中出现的视觉对象。要更改呈现的视觉对象，请更新 JSON 架构中的相应属性，然后选择应用代码。下图显示了使用上一步中的 JSON 架构创建的口红图表。

    Bar chart showing current year sales across various industries, with Finance having the highest sales.

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

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

交互式 Highchart 功能

Amazon QuickSight 中的 Highchart 可视化效果支持自定义操作、突出显示和自定义字段颜色一致性，使您能够创建与其他 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
      ],
    }]
  }
}

字段级颜色一致性

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