考慮事項 Highcharts ビジュアルの作成インタラクティブハイチャート機能

Highcharts の使用

Highcharts ビジュアルを使用して、Highcharts Core ライブラリを使用するカスタムチャートタイプとビジュアルを作成します。Highcharts ビジュアルは、QuickSight 作成者が Highcharts API に直接アクセスできるようにします。

Highcharts ビジュアルを設定するには、QuickSight の作成者は、QuickSight のビジュアルに Highcharts JSON スキーマを追加する必要があります。作成者は QuickSight 式を使用して QuickSight フィールドを参照し、ハイチャートビジュアルの生成に使用する JSON スキーマの書式設定オプションを使用できます。JSON チャートコードエディタは、入力 JSON スキーマが正しく設定されていることを確認するために、オートコンプリートおよびリアルタイム検証のコンテキストに応じたサポートを提供します。セキュリティを維持するために、Highcharts ビジュアルエディタは CSS、JavaScript、または HTML コード入力を受け入れません。

Amazon QuickSight の Highcharts ビジュアルの詳細については、DemoCentral の「Highcharts Visual QuickStart Guide」を参照してください。

次の図は、QuickSight の Highcharts アイコンを示しています。

次の図は、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 ビジュアルに適用される以下の制限事項を確認してください。

次の JSON 値は、ハイチャートチャートコード JSON エディタではサポートされていません。
- 関数
- 日付
- 未定義の値
GeoJSON ファイルやその他のイメージへのリンクは、Highcharts ビジュアルではサポートされていません。
フィールドの色は、Highcharts ビジュアルでは使用できません。デフォルトのテーマ色は、すべての Highcharts ビジュアルに適用されます。

Highcharts ビジュアルの作成

Amazon QuickSight で Highcharts ビジュアルを作成するには、次の手順に従います。

QuickSight コンソールを開きます。
Highcharts ビジュアルを追加する QuickSight 分析を開きます。
アプリケーションバーで [Add (追加)] を選択し、[Add visual (ビジュアルを追加)] を選択します。
ビジュアルタイプペインで、ハイチャートビジュアルアイコンを選択します。分析シートに空のビジュアルが表示され、左側にプロパティペインが開きます。
プロパティペインで、表示設定セクションを展開し、次のアクションを実行します。
1. タイトルの編集で、ペイントブラシアイコンを選択し、ビジュアルのタイトルを入力し、保存を選択します。または、目のアイコンを選択してタイトルを非表示にします。
2. （オプション) 字幕の編集 で、ペイントブラシアイコンを選択し、ビジュアルに含める字幕を入力し、保存を選択します。または、アイボールアイコンを選択して字幕を非表示にします。
3. （オプション) Alt テキストには、ビジュアルに含める Alt テキストを追加します。
データポイント制限セクションを展開します。表示するデータポイントの数には、ビジュアルに表示するデータポイントの数を入力します。ハイチャートビジュアルには、最大 10,000 個のデータポイントを表示できます。
次の図に示すように、グラフコードセクションを展開します。

チャートコード 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
    }
  ]
}

APPLY CODE を選択します。QuickSight は、JSON スキーマを分析に表示されるビジュアルに変換します。レンダリングされたビジュアルを変更するには、JSON スキーマの適切なプロパティを更新し、APPLY CODE を選択します。次の図は、前のステップの JSON スキーマで作成されたリップスティックグラフを示しています。
（オプション) リファレンスドロップダウンを開き、役立つ Highctarts リファレンスマテリアルへのリンクにアクセスします。

レンダリングされたビジュアルに満足したら、プロパティペインを閉じます。Highcharts ビジュアルの設定に使用できる 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 は選択したデータに基づいてカスタムアクションを処理できます。

クロスビジュアルハイライト

クロスビジュアルハイライトは、さまざまなグラフ間にビジュアル接続を作成することで、ダッシュボードのインタラクティブ性を強化します。ユーザーが 1 つのグラフで要素を選択すると、他のビジュアルの関連要素が自動的に強調表示され、関連しない要素は淡色表示されます。この機能は、ユーザーが複数のビジュアライゼーション間の関係とパターンをすばやく特定し、データの理解と分析を向上させるのに役立ちます。

クロスビジュアルハイライトを有効にし、フィールドの色整合性を維持するには、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
      ],
    }]
  }
}

フィールドレベルの色の整合性

ダッシュボード全体で視覚的な一貫性を維持することは、効果的なデータ解釈に不可欠です。フィールドレベルの色整合性機能により、特定のディメンションに割り当てられた色が、ダッシュボード内のすべてのビジュアルでに確実に反映されます。この一貫性により、ユーザーはさまざまなグラフタイプとビューで特定のデータカテゴリをすばやく認識して追跡できるため、全体的なユーザーエクスペリエンスとデータ理解が向上します。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

ヒートマップの使用

Highcharts の JSON 式言語