使用高圖表 - Amazon QuickSight
考量事項建立高圖表視覺效果互動式高圖表功能

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用高圖表

使用 Highcharts 視覺效果來建立使用 Highcharts Core 程式庫的自訂圖表類型和視覺效果。Highcharts 視覺效果可讓 QuickSight 作者直接存取 Highcharts API。

若要設定高圖表視覺效果，QuickSight 作者需要將高圖表 JSON 結構描述新增至 QuickSight 中的視覺效果。作者可以使用 QuickSight 表達式來參考 QuickSight 欄位，以及他們用來產生 Highcharts 視覺效果的 JSON 結構描述中的格式化選項。JSON Chart 程式碼編輯器提供自動完成和即時驗證的上下文協助，以確保輸入 JSON 結構描述已正確設定。為了維護安全性，Highcharts 視覺化編輯器不接受 CSS、JavaScript 或 HTML 程式碼輸入。

如需 Amazon QuickSight 中 Highcharts 視覺效果的詳細資訊，請參閱 DemoCentral 中的 Highcharts Visual QuickStart 指南。

下圖顯示 QuickSight 中的高圖表圖示。

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 Chart 程式碼 JSON 編輯器不支援下列 JSON 值：

    • 函數

    • 日期

    • 未定義的值

  • Highcharts 視覺效果不支援連結至 GeoJSON 檔案或其他影像。

  • 欄位顏色不適用於 Highcharts 視覺效果。預設佈景主題顏色會套用至所有 Highcharts 視覺效果。

建立高圖表視覺效果

使用下列程序在 Amazon QuickSight 中建立 Highcharts 視覺效果。

  1. 開啟 QuickSight 主控台。

  2. 開啟您要新增 Highcharts 視覺效果的 QuickSight 分析。

  3. 選擇應用程式列上的新增，然後選擇新增視覺效果。

  4. 在視覺效果類型窗格中，選擇高圖表視覺效果圖示。分析表上會顯示空白視覺效果，屬性窗格則會在左側開啟。

  5. 在屬性窗格中，展開顯示設定區段，並執行下列動作：

    1. 針對編輯標題，選擇畫筆圖示，輸入您希望視覺效果擁有的標題，然後選擇儲存。或者，選擇眼球圖示來隱藏標題。

    2. （選用） 對於編輯字幕，選擇畫筆圖示，輸入您希望視覺效果具有的字幕，然後選擇儲存。或者，選擇眼球圖示來隱藏字幕。

    3. （選用） 對於 Alt 文字，新增您希望視覺效果具有的 alt 文字。

  6. 展開資料點限制區段。針對要顯示的資料點數量，輸入您希望視覺效果顯示的資料點數量。高圖表視覺效果最多可顯示 10，000 個資料點。

  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 參考資料的連結。

當您對轉譯的視覺效果感到滿意時，請關閉屬性窗格。如需可用於設定高圖表視覺效果之 QuickSight 特定表達式的詳細資訊，請參閱 適用於 Highcharts 視覺效果的 Amazon QuickSight JSON 表達式語言。

互動式高圖表功能

Amazon 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
      ],
    }]
  }
}

欄位層級顏色一致性

在整個儀表板中維持視覺化一致性對於有效資料解釋至關重要。欄位層級顏色一致性功能可確保指派給特定維度的顏色存在於儀表板中的所有視覺效果中。這種一致性有助於使用者快速識別和追蹤不同圖表類型和檢視的特定資料類別，從而增強整體使用者體驗和資料理解能力。