Highcharts の使用

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

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

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

以下の図は、QuickSight の Highcharts アイコンです。

以下の図は、QuickSight の Highcharts ビジュアルのための [チャートコード] の JSON エディタで設定されたリップスティックチャートです。

QuickSight の Highcharts ビジュアルで作成できるビジュアルのその他の例については、「Highcharts demos」を参照してください。

考慮事項

Amazon QuickSight で Highcharts ビジュアルの作成を開始する前に、Highcharts ビジュアルに適用される以下の制限事項を確認してください。

Highcharts ビジュアルの作成

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

レンダリングされたビジュアルに満足できたなら、プロパティペインを閉じます。Highcharts ビジュアルの設定に使用できる QuickSight 固有の式の詳細については、「Amazon QuickSight における Highcharts ビジュアルのための JSON 式言語」を参照してください。

Highchart のインタラクティブ機能

Amazon QuickSight の Highchart ビジュアライゼーションは、カスタムアクション、ハイライト表示、カスタムフィールドの色の整合性をサポートするため、他の 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
      ],
    }]
  }
}

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

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