Highcharts の使用

QuickSight コンソールを開きます。

Highcharts ビジュアルを追加する QuickSight 分析を開きます。

アプリケーションバーで [Add (追加)] を選択し、[Add visual (ビジュアルを追加)] を選択します。

ビジュアルタイプペインで、ハイチャートビジュアルアイコンを選択します。分析シートに空のビジュアルが表示され、左側にプロパティペインが開きます。

プロパティペインで、表示設定セクションを展開し、次のアクションを実行します。

1. タイトルの編集 で、ペイントブラシアイコンを選択し、ビジュアルに含めるタイトルを入力して、保存 を選択します。または、目のアイコンを選択してタイトルを非表示にします。

2. （オプション) 字幕の編集 で、ペイントブラシアイコンを選択し、ビジュアルに付ける字幕を入力し、保存を選択します。または、目のアイコンを選択して字幕を非表示にします。

3. （オプション) 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 リファレンスマテリアルへのリンクにアクセスします。