使用 Highcharts - Amazon Quick Suite
考量事項建立 Highcharts 視覺效果互動式 Highchart 功能

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

使用 Highcharts

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

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

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

下圖顯示在 Quick Suite 中 Highcharts 視覺效果的圖表程式碼 JSON 編輯器中設定的口紅圖表。

如需您可以在 Quick Suite 中使用 Highcharts 視覺效果建立的視覺效果的更多範例，請參閱 Highcharts 示範。

考量事項

在您開始在 Amazon Quick Suite 中建立 Highcharts 視覺效果之前，請檢閱適用於 Highcharts 視覺效果的下列限制。

  • Highcharts 圖表程式碼 JSON 編輯器不支援下列 JSON 值：

    • 函數

    • 日期

    • 未定義的值

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

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

建立 Highcharts 視覺效果

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

  1. 開啟 Quick Suite 主控台。

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

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

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

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

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

    2. (選用) 在編輯副標題欄位中，選擇畫筆圖示，輸入您希望視覺效果擁有的副標題，然後選擇儲存。或者，選擇眼睛圖示來隱藏副標題。

    3. (選用) 在替代文字欄位中，新增您希望視覺效果具有的替代文字。

  6. 展開資料點限制區段。在要顯示的資料點數欄位中，輸入您希望視覺效果顯示的資料點數量。Highcharts 視覺效果最多可顯示 10,000 個資料點。

  7. 展開圖表程式碼區段。

  8. 在圖表程式碼 JSON 編輯器中輸入 JSON 結構描述。該編輯器提供關聯式協助和即時驗證，以確保輸入 JSON 已正確設定。您可以在錯誤下拉式清單中檢視 Quick Suite 識別的任何錯誤。以下範例顯示了 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. 選擇套用程式碼。Quick Suite 會將 JSON 結構描述轉換為顯示在分析中的視覺效果。若要變更轉譯的視覺效果，請更新 JSON 結構描述中的相應屬性，然後選擇套用程式碼。

  10. (選用) 開啟參考下拉式清單，存取實用 Highctarts 參考資料的連結。

對轉譯的視覺效果感到滿意後，關閉「屬性」窗格。如需可用於設定 Highcharts 視覺效果之 Quick Sight 特定表達式的詳細資訊，請參閱 適用於 Highcharts 視覺效果的 Amazon Quick Suite JSON 表達式語言。

互動式 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 Suite 視覺化互動系統之間的橋樑。以下是設定方法範例：

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

欄位層級顏色一致性

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