本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。 # 使用 Highcharts 使用 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 编辑器中配置的口红图表。 ![\[alt text not found\]](http://docs.amazonaws.cn/quick/latest/userguide/images/highcharts-example1.png) [有关可以在 Quick 中使用 Highcharts 视觉效果创建的视觉效果的更多示例，请参阅 Highcharts 演示。](https://www.highcharts.com/demo) ## 注意事项 在开始在 Amazon Quick 中创建 Highcharts 视觉效果之前，请查看适用于 Highcharts 视觉效果的以下限制。 + Highcharts **图表代码** JSON 编辑器不支持以下 JSON 值： + 函数 + 日期 + 未定义的值 + Highcharts 视觉对象不支持指向 GeoJSON 文件或其他图像的链接。 + 字段颜色不适用于 Highcharts 视觉对象。默认主题颜色适用于所有 Highcharts 视觉对象。 ## 创建 Highcharts 视觉对象 使用以下步骤在 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": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "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 功能 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 的视觉交互系统之间的桥梁。下面是有关如何设置的示例： ``` { "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 ], }] } } ``` ### 字段级颜色一致性 保持控制面板的视觉连贯性对于有效的数据解释至关重要。字段级颜色一致性功能可确保分配给特定维度的颜色在控制面板的所有视觉对象中保持不变。这种一致性有助于用户快速识别和跟踪不同图表类型和视图中的特定数据类别，从而增强整体用户体验和数据理解。 # 适用于 Highcharts 视觉效果的亚马逊快速 JSON 表达式语言 适用于 Highcharts 的 JSON 表达式语言 Highcharts 视觉对象接受大多数[有效的 JSON 值](https://www.w3schools.com/js/js_json_datatypes.asp)、标准算术运算符、字符串运算符和条件运算符。Highcharts 视觉对象不支持以下 JSON 值： + 函数 + 日期 + 未定义的值 快速创作者可以使用 JSON 表达式语言为 highcharts 视觉效果创建 JSON 架构。JSON 表达式语言用于将 JSON 绑定到 APIs 或数据集，以允许动态填充和修改 JSON 结构。开发人员还可以使用 JSON 表达式语言，通过简洁直观的表达式对 JSON 数据进行扩充和转换。 在 JSON 表达式语言中，表达式以数组形式表示，其中第一个元素指定操作，后续元素是参数。例如，`["unique", [1, 2, 2]]` 对数组 `[1, 2, 2]` 应用 `unique` 操作，结果为 `[1, 2]`。这种基于数组的语法允许使用灵活的表达式，从而可以对 JSON 数据进行复杂的转换。 JSON 表达式语言支持*嵌套表达式*。嵌套表达式是包含其他表达式作为参数的表达式。例如，`["split", ["toUpper", "hello world"], " "]` 首先将字符串 `hello world` 转换为大写，然后将其拆分为单词数组，结果为 `["HELLO", "WORLD"]`。 使用以下部分详细了解 Amazon Quick 中 Highcharts 视觉效果的 JSON 表达式语言。 **Topics** + [ # 算术 ](jle-arithmetics.md) + [ # 数组运算 ](jle-arrays.md) + [ # Amazon 快速表达式 ](jle-qs-expressions.md) # 算术 下表显示了可与 JSON 表达式语言一起使用的算术表达式。 | 操作 | Expression | Input | Output | | --- | --- | --- | --- | | 加 | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | 减 | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | 乘 | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | 除 | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | 取模 | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | 幂 | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | 绝对值 | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | 对数（以 10 为底） | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | 自然对数 | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | 四舍五入 | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | 向下取整 | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | 向上取整 | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | 正弦 | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | 余弦 | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | 正切 | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # 数组运算 JSON 表达式语言允许对以下函数进行通用数组操作： + `map` – 将映射函数应用于数组的每个元素，并返回包含转换值的新数组。 例如，`["map", [1, 2, 3], ["*", ["item"], 2]]` 通过将数组 `[1, 2, 3]` 的每个元素乘以 2 来映射该数组的每个元素。 + `filter` – 根据给定的条件筛选数组并返回仅包含满足条件的元素的新数组 例如，`["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` 筛选数组 `[1, 2, 3, 4, 5]` 以仅包含偶数。 + `reduce` – 通过对每个元素应用 Reducer 函数并累加结果，将数组缩减为单个值。 例如，`["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` 将数组 `[1, 2, 3, 4, 5]` 缩减为其元素之和。 + `get` – 通过指定键或索引，从对象或数组中检索值。 例如，`["get", ["item"], "name"]` 从当前项检索 `"name"` 属性的值。 + `unique` – 给定一个数组，仅返回此数组内唯一的项。 例如，`["unique", [1, 2, 2]]` 将返回 `[1, 2]`。 # Amazon 快速表达式 Amazon Quick 提供了其他表达式来增强 Highcharts 视觉效果的功能。使用以下各节详细了解 Highcharts 视觉效果的常用快速表达式。有关 Amazon Quick 中的 JSON 表达式语言的更多信息，请参阅中的 [Highcharts 视觉 QuickStart 指南](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)。[DemoCentral](https://democentral.learnquicksight.online/#) **Topics** + [ ## `getColumn` ](#highcharts-expressions-getcolumn) + [ ## `formatValue` ](#highcharts-expressions-formatvalue) ## `getColumn` 使用 `getColumn` 表达式从指定的列索引返回值。例如，下表显示了产品列表及其类别和价格。 | Product name | 类别 | Price | | --- | --- | --- | | 产品 A | Technology | 100 | | 产品 B | 零售 | 50 | | 产品 C | 零售 | 75 | 以下 `getColumn` 查询生成一个数组，显示所有产品名称及其价格。 ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` 返回以下 JSON： ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` 您还可以一次传递多个列来生成一组数组，如下例所示。 **输入** ``` { values: ["getColumn", 0, 2] } ``` **输出** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` 与 `getColumn` 类似，以下表达式可用于从字段井或主题返回列值： + `getColumnFromGroupBy` 从分组依据字段返回列。第二个参数是要返回的列的索引。例如，`["getColumnFromGroupBy", 0]` 以数组形式返回第一个字段的值。您可以传递多个索引来获取一组数组，其中每个元素都与分组依据字段井中的字段对应。 + `getColumnFromValue` 从值字段井返回列。您可以传递多个索引来获取一组数组，其中每个元素都与值字段井中的字段对应。 + `getColorTheme`返回 Quick 主题的当前调色板，如以下示例所示。 ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **示例** ![\[alt text not found\]](http://docs.amazonaws.cn/quick/latest/userguide/images/get-column-example.png) `getColumn` 可以访问表中的任何列： + `["getColumn", 0]` - 返回数组 `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]` - 返回数组 `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]` - 返回数组 `[1674, 7425, 4371, ...]` `getColumnFromGroupBy` 的工作方式类似，但是其索引仅限于分组依据字段井中的列： + `["getColumnFromGroupBy", 0]` - 返回数组 `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]` - 返回数组 `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]` - 不起作用，因为分组依据字段井中只有两列 `getColumnFromValue` 的工作方式类似，但是其索引仅限于值字段井中的列： + `["getColumnFromValue", 0]` - 返回数组 `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]` - 不起作用，因为值字段井中只有一列 + `["getColumnFromValue", 2]` - 不起作用，因为值字段井中只有一列 ## `formatValue` 使用`formatValue`表达式将快速格式化应用于您的值。例如，以下表达式使用在 Quick 字段井的第一个字段中指定的格式值来格式化 x 轴标签。 ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```