本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用 Highcharts 使用 Highcharts 視覺效果來建立使用 [Highcharts Core 程式庫](https://www.highcharts.com/blog/products/highcharts/)的自訂圖表類型和視覺效果。Highcharts 視覺效果可讓快速作者直接存取 [Highcharts API](https://api.highcharts.com/highcharts/)。 若要設定高圖表視覺效果，快速作者需要將高圖表 JSON 結構描述新增至 Quick 中的視覺效果。作者可以使用快速表達式來參考快速欄位，以及在用來產生高圖表視覺效果的 JSON 結構描述中格式化選項。JSON **圖表程式碼**編輯器提供自動完成和即時驗證的關聯式協助，以確保輸入 JSON 結構描述已正確設定。為了維護安全性，Highcharts 視覺效果編輯器不接受 CSS、JavaScript 或 HTML 程式碼輸入。 如需 Amazon Quick 中 Highcharts 視覺效果的詳細資訊，請參閱 [DemoCentral](https://democentral.learnquicksight.online/#) 中的 [Highcharts Visual QuickStart 指南](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)。 下圖顯示在 Quick 中 Highcharts 視覺效果的**圖表程式碼** JSON 編輯器中設定的口紅圖表。 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/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 視覺效果最多可顯示 10,000 個資料點。 1. 展開**圖表程式碼**區段。 1. 在**圖表程式碼** JSON 編輯器中輸入 JSON 結構描述。該編輯器提供關聯式協助和即時驗證，以確保輸入 JSON 已正確設定。您可以在錯誤下拉式清單中檢視快速識別的任何**錯誤**。以下範例顯示了 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. 選擇**套用程式碼**。快速將 JSON 結構描述轉換為顯示在分析中的視覺效果。若要變更轉譯的視覺效果，請更新 JSON 結構描述中的相應屬性，然後選擇**套用程式碼**。 1. (選用) 開啟**參考**下拉式清單，存取實用 Highctarts 參考資料的連結。 對轉譯的視覺效果感到滿意後，關閉「屬性」窗格。如需可用於設定 Highcharts 視覺效果之 Quick Sight 特定表達式的詳細資訊，請參閱 [適用於 Highcharts 視覺效果的 Amazon Quick JSON 表達式語言](highchart-expressions.md)。 ## 互動式 Highchart 功能 Amazon Quick Sight 中的高圖表視覺效果支援自訂動作、反白和自訂欄位顏色一致性，可讓您建立互動式且視覺化的凝聚性圖表，與其他 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 視覺效果的 Amazon Quick JSON 表達式語言 Highcharts 視覺效果可接受最[有效的 JSON 值](https://www.w3schools.com/js/js_json_datatypes.asp)、標準算術運算子、字串運算子和條件運算子。Highcharts 視覺效果不支援下列 JSON 值： + 函數 + 日期 + 未定義的值 快速作者可以使用 JSON 表達式語言為高圖表視覺效果建立 JSON 結構描述。JSON 表達式語言用於將 JSON 繫結至 API 或資料集，以允許動態填入和修改 JSON 結構。開發人員也可以使用 JSON 表達式語言，透過簡潔直觀的表達式來擴充和轉換 JSON 資料。 使用 JSON 表達式語言時，表達式會以陣列表示，其中第一個元素指定操作，後續元素則是引數。例如，`["unique", [1, 2, 2]]` 會將 `unique` 操作套用至陣列 `[1, 2, 2]`，得到的結果為 `[1, 2]`。此陣列型語法允許彈性表達式，從而能夠對 JSON 資料進行複雜轉換。 JSON 表達式語言支援*巢狀表達式*。巢狀表達式是包含其他表達式做為引數的表達式。例如，`["split", ["toUpper", "hello world"], " "]` 先將字串 `hello world` 轉換為大寫，然後將其分割為單字陣列，得到的結果為 `["HELLO", "WORLD"]`。 使用下列各節，進一步了解 Amazon Quick 中 Highcharts 視覺效果的 JSON 表達式語言。 **Topics** + [算術](jle-arithmetics.md) + [陣列運算子](jle-arrays.md) + [Amazon Quick 表達式](jle-qs-expressions.md) # 算術 下表顯示了可與 JSON 表達式語言搭配使用的算術表達式。 | 作業 | 表達式 | 輸入 | 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`：透過對每個元素套用減少程式函數並累積結果，將陣列減少為單一值。 例如，`["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 Quick 表達式 Amazon Quick 提供額外的表達式來增強 Highcharts 視覺效果的功能。使用下列各節進一步了解高圖表視覺效果的常見快速表達式。如需 Amazon Quick 中 JSON 表達式語言的詳細資訊，請參閱 [DemoCentral](https://democentral.learnquicksight.online/#) 中的 [Highcharts Visual QuickStart 指南](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)。 **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` 使用 `getColumn` 表達式從指定的資料欄索引傳回值。例如，下表顯示了產品及其類別和價格的清單。 | 產品名稱 | Category | Price | | --- | --- | --- | | 產品 A | 技術 | 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` 會傳回快速佈景主題的目前顏色面板，如下列範例所示。 ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **範例** ![\[alt text not found\]](http://docs.aws.amazon.com/zh_tw/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] } } ```