Highcharts の使用 - Amazon QuickSight

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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 ビジュアルの詳細については、DemoCentralHighcharts Visual QuickStart ガイドを参照してください。

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

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

  • 次の JSON 値は、ハイチャートチャートコード JSON エディタではサポートされていません。

    • 関数

    • 日付

    • 未定義の値

  • GeoJSON ファイルやその他のイメージへのリンクは、Highcharts ビジュアルではサポートされていません。

  • フィールドの色は、ハイチャートビジュアルでは使用できません。デフォルトのテーマ色は、すべての Highcharts ビジュアルに適用されます。

Highcharts ビジュアルの作成

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

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

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

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

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

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

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

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

    3. (オプション) Alt テキストには、ビジュアルに含める alt テキストを追加します。

  6. データポイント制限セクションを展開します。表示するデータポイントの数には、ビジュアルに表示するデータポイントの数を入力します。Highcharts ビジュアルには、最大 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. APPLY CODE を選択します。QuickSight は、JSON スキーマを分析に表示されるビジュアルに変換します。レンダリングされたビジュアルを変更するには、JSON スキーマの適切なプロパティを更新し、APPLY CODE を選択します。次の図は、前のステップの JSON スキーマで作成されたリップスティックグラフを示しています。

    Bar chart showing current year sales across various industries, with Finance having the highest sales.
  10. (オプション) リファレンスドロップダウンを開き、役立つ Highctarts リファレンスマテリアルへのリンクにアクセスします。

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