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

# 使用 Highcharts
<a name="highchart"></a>

使用 Highcharts 视觉对象来创建使用 [Highcharts Core 库](https://www.highcharts.com/blog/products/highcharts/)的自定义图表类型和视觉对象。Highcharts 视觉效果让 Quick 作者可以直接访问 [High](https://api.highcharts.com/highcharts/) charts API。

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

有关 Amazon Quick 中 Highcharts 视觉效果的更多信息，请参阅中的 [Highcharts 视觉 QuickStart 指南](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)。[DemoCentral](https://democentral.learnquicksight.online/#)

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

![条形图比较了十个行业中以蓝色表示的本年度销售额与以深灰色表示的上一年度销售额。](http://docs.aws.amazon.com/zh_cn/quick/latest/userguide/images/highcharts-example1.png)


[有关可以在 Quick 中使用 Highcharts 视觉效果创建的视觉效果的更多示例，请参阅 Highcharts 演示。](https://www.highcharts.com/demo)

## 注意事项
<a name="highchart-considerations"></a>

在开始在 Amazon Quick 中创建 Highcharts 视觉效果之前，请查看适用于 Highcharts 视觉效果的以下限制。
+ Highcharts **图表代码** JSON 编辑器不支持以下 JSON 值：
  + 函数
  + 日期
  + 未定义的值
+ Highcharts 视觉对象不支持指向 GeoJSON 文件或其他图像的链接。
+ 字段颜色不适用于 Highcharts 视觉对象。默认主题颜色适用于所有 Highcharts 视觉对象。

## 创建 Highcharts 视觉对象
<a name="highchart-create"></a>

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

1. 打开 [Quick 控制台](https://quicksight.aws.amazon.com/)。

1. 打开要为其添加 Highcharts 视觉效果的快速分析。

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

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

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

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

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

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

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

1. 展开**图表代码**部分。

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

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

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

当您对呈现的视觉对象感到满意时，请关闭属性窗格。有关可用于配置 Highcharts 视觉效果的 Quick Sight 特定表达式的更多信息，请参阅[适用于 Highcharts 视觉效果的亚马逊快速 JSON 表达式语言](highchart-expressions.md)。

## 交互式 Highchart 功能
<a name="interactive-features"></a>

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

### 自定义操作
<a name="custom-actions-feature"></a>

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

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

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

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

### Cross-visual 突出显示
<a name="visual-highlighting-feature"></a>

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

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

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

### Field-level 颜色一致性
<a name="field-color-feature"></a>

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