翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # Highcharts の使用 Highcharts ビジュアルを使用して、[Highcharts Core ライブラリ](https://www.highcharts.com/blog/products/highcharts/)を使用するカスタムチャートタイプとビジュアルを作成します。Highcharts ビジュアルを使用すると、クイック作成者は [Highcharts API](https://api.highcharts.com/highcharts/) に直接アクセスできます。 Highcharts ビジュアルを設定するには、クイック作成者は Quick のビジュアルに Highcharts JSON スキーマを追加する必要があります。作成者は、クイック式を使用してクイックフィールドを参照し、ハイチャートビジュアルの生成に使用する JSON スキーマの書式設定オプションを使用できます。**[チャートコード]** の JSON エディタには、入力された JSON スキーマの設定が適切であることを確実にするために、オートコンプリートのためのコンテキスト支援とリアルタイムの検証が提供されます。セキュリティを維持するために、Highcharts ビジュアルエディタは CSS、JavaScript、または HTML コードの入力を受け付けません。 Amazon Quick の Highcharts ビジュアルの詳細については、[DemoCentral](https://democentral.learnquicksight.online/#) の[「Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)」を参照してください。 次の図は、Quick の Highcharts ビジュアルの**グラフコード** JSON エディタで設定されたリップスティックグラフを示しています。 ![\[alt text not found\]](http://docs.aws.amazon.com/ja_jp/quick/latest/userguide/images/highcharts-example1.png) Quick の Highcharts ビジュアルで作成できるビジュアルのその他の例については、[「Highcharts デモ](https://www.highcharts.com/demo)」を参照してください。 ## 考慮事項 Amazon Quick で Highcharts ビジュアルの作成を開始する前に、Highcharts ビジュアルに適用される以下の制限事項を確認してください。 + Highcharts 用の **[チャートコード]** の JSON エディタでは、以下の JSON 値はサポートされていません。 + 関数 + 日付 + 未定義の値 + GeoJSON ファイルやその他のイメージへのリンクは、Highcharts ビジュアルではサポートされていません。 + フィールドの色は、Highcharts ビジュアルでは使用できません。すべての Highcharts ビジュアルにデフォルトのテーマ色が適用されます。 ## Highcharts ビジュアルの作成 Amazon Quick で Highcharts ビジュアルを作成するには、次の手順に従います。 1. [クイックコンソール](https://quicksight.aws.amazon.com/)を開きます。 1. Highcharts ビジュアルを追加するクイック分析を開きます。 1. アプリケーションバーで **[追加]** を選択し、**[ビジュアルを追加]** を選択します。 1. **[ビジュアルタイプ]** ペインで、Highcharts ビジュアルのアイコンを選択します。分析シートに空のビジュアルが表示され、左側に **[プロパティ]** ペインが開きます。 1. **[プロパティ]** ペインで **[表示設定]** セクションを展開し、以下のアクションを実行します。 1. **[タイトルの編集]** のペイントブラシアイコンを選択し、ビジュアルに付けるタイトルを入力して **[保存]** を選択します。または、目のアイコンを選択してタイトルを非表示にします。 1. (オプション) **[字幕の編集]** のペイントブラシアイコンを選択し、ビジュアルに付ける字幕を入力して **[保存]** を選択します。または、目のアイコンを選択して字幕を非表示にします。 1. (オプション) **[代替テキスト]** に、ビジュアルに表示する代替テキストを追加します。 1. **[データポイント制限]** セクションを展開します。**[表示するデータポイントの数]** に、ビジュアルに表示するデータポイントの数を入力します。Highcharts ビジュアルには最大 10,000 個のデータポイントを表示できます。 1. **グラフコード**セクションを展開します。 1. **[チャートコード]** の JSON エディタに JSON スキーマを入力します。エディタでは、入力された JSON の設定が適切であることを確実にするために、コンテキスト支援とリアルタイムの検証が提供されます。クイック識別されたエラーは、**エラー**ドロップダウンで表示できます。以下の例は、業界別の当年の売上を示すリップスティックチャートを作成する JSON スキーマです。 ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "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 } ] } ``` 1. **[コードを適用]** を選択します。JSON スキーマを分析に表示されるビジュアルにすばやく変換します。レンダリングされたビジュアルを変更するには、JSON スキーマの適切なプロパティを更新し、**[コードを適用]** を選択します。 1. (オプション) **[リファレンス]** ドロップダウンを開き、Highcharts に関する有用な参考文献へのリンクにアクセスします。 レンダリングされたビジュアルに満足できたなら、プロパティペインを閉じます。Highcharts ビジュアルの設定に使用できる Quick Sight 固有の式の詳細については、「」を参照してください[Highcharts ビジュアルの Amazon Quick JSON 式言語](highchart-expressions.md)。 ## 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 は選択したデータに基づいてカスタムアクションを処理できます。 ### クロスビジュアルハイライト クロスビジュアルハイライトは、さまざまなチャート間に視覚的なつながりを持たせることで、ダッシュボードのインタラクティブ性を強化します。ユーザーが 1 つのグラフで要素を選択すると、他のビジュアルの関連要素が自動的に強調表示され、関連しない要素は淡色表示されます。この機能は、ユーザーが複数のビジュアライゼーション間の関係とパターンをすばやく特定し、データの理解と分析を向上させるのに役立ちます。 クロスビジュアルハイライトを有効にし、フィールドの色整合性を維持するには、Highcharts の JSON 設定で `quicksight` 句を使用します。この句は、Highcharts レンダリングと Quick のビジュアルインタラクションシステムの橋渡しとして機能します。設定方法の例を次に示します。 ``` { "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 ], }] } } ``` ### フィールドレベルの色の整合性 ダッシュボード全体で視覚的な一貫性を維持することは、効果的なデータ解釈に不可欠です。フィールドレベルの色整合性機能により、特定のディメンションに割り当てられた色が、ダッシュボード内のすべてのビジュアルで確実に反映されます。この一貫性により、ユーザーはさまざまなチャートタイプやビューで特定のデータカテゴリをすばやく認識して追跡できるため、全体的なユーザーエクスペリエンスとデータ理解が向上します。 # Highcharts ビジュアルの Amazon Quick JSON 式言語 Highcharts ビジュアルは、ほとんどの[有効な JSON 値](https://www.w3schools.com/js/js_json_datatypes.asp)、標準算術演算子、文字列演算子、および条件演算子を受け入れます。Highcharts ビジュアルでは、以下の JSON 値はサポートされていません。 + 関数 + 日付 + 未定義の値 クイック作成者は、JSON 式言語を使用して、ハイチャートビジュアルの JSON スキーマを作成できます。JSON 式言語は、JSON を API またはデータセットにバインドして、動的なデータの集約と JSON 構造の変更を可能にするために使用されます。開発者は、JSON 式言語を使用して、簡潔で直感的な式で JSON データを拡張および変換することもできます。 JSON 式言語では、式は配列として表されます。最初の要素が操作を指定し、後続の要素が引数になります。たとえば、`["unique", [1, 2, 2]]` は `unique` 操作を配列 `[1, 2, 2]` に適用し、結果として `[1, 2]` を返します。この配列ベースの構文により、JSON データの複雑な変換を可能にする柔軟な式を記述できます。 JSON 式言語は、*ネストされた式*をサポートします。ネストされた式とは、引数として他の式を含む式です。たとえば、`["split", ["toUpper", "hello world"], " "]` は最初に文字列 `hello world` を大文字に変換してから単語の配列に分割し、結果は `["HELLO", "WORLD"]` になります。 Amazon Quick の Highcharts ビジュアルの JSON 式言語の詳細については、以下のセクションを参照してください。 **Topics** + [算術演算](jle-arithmetics.md) + [配列オペレーション](jle-arrays.md) + [Amazon Quick 式](jle-qs-expressions.md) # 算術演算 以下の表は、JSON 式言語で使用できる算術式を示しています。 | 運用 | 式 | Input | Output | | --- | --- | --- | --- | | 加算 | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | 減算 | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | 乗算 | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | 除算 | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | モジュロ | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | べき算 | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | 絶対値 | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | [Square Root] (平方根) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | 対数 (底 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | 自然対数 | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | 丸め | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | 切り捨て | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | 切り上げ | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | サイン (正弦) | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | コサイン | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | タンジェント | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # 配列オペレーション JSON 式言語では、次の関数の汎用配列操作が可能です。 + `map` – 配列の各要素にマッピング関数を適用し、変換された値を持つ新しい配列を返します。 たとえば、`["map", [1, 2, 3], ["*", ["item"], 2]]` は配列 `[1, 2, 3]` の各要素に 2 を掛けてマッピングします。 + `filter` – 特定の条件に基づいて配列をフィルタリングし、条件を満たす要素のみを含む新しい配列を返します。 たとえば、`["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` は配列 `[1, 2, 3, 4, 5]` をフィルタリングして、偶数のみを含めます。 + `reduce` – 各要素にリデューサー関数を適用して結果を累積することで、配列を単一の値に縮約します。 たとえば、`["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` は配列 `[1, 2, 3, 4, 5]` をその要素の合計に縮約します。 + `get` – キーまたはインデックスを指定して、オブジェクトまたは配列から値を取得します。 たとえば、`["get", ["item"], "name"]` は現在の項目から `"name"` プロパティの値を取得します。 + `unique` – 配列が与えられた場合、この配列内の一意の項目のみを返します。 例えば、`["unique", [1, 2, 2]]` は `[1, 2]` を返します。 # Amazon Quick 式 Amazon Quick は、Highcharts ビジュアルの機能を強化するための追加の式を提供します。ハイチャートビジュアルの一般的なクイック式の詳細については、以下のセクションを参照してください。Amazon Quick の JSON 式言語の詳細については、[DemoCentral](https://democentral.learnquicksight.online/#) の[「Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual)」を参照してください。 **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` `getColumn` 式を使用して、指定された列インデックスから値を返します。たとえば以下の表は、製品のリストをカテゴリと価格と並べて表示しています。 | 製品名 | Category | Price | | --- | --- | --- | | 製品 A | テクノロジー | 100 | | 製品 B | リテール | 50 | | 製品 C | リテール | 75 | 以下の `getColumn` クエリは、すべての製品名とその価格を示す配列を生成します。 ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` 以下の JSON が返されます。 ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` 以下の例に示すように、複数の列を一度に渡して配列の配列を生成することもできます。 **Input** (入力) ``` { values: ["getColumn", 0, 2] } ``` **出力** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` `getColumn` と同様に、以下の式を使用して、フィールドウェルまたはテーマから列値を返すことができます。 + `getColumnFromGroupBy` は、フィールドごとにグループから列を返します。2 番目の引数は、返す列のインデックスです。たとえば、`["getColumnFromGroupBy", 0]` は最初のフィールドの値を配列として返します。複数のインデックスを渡すことで、各要素が group by フィールドウェル内のフィールドに対応する配列の配列を取得できます。 + `getColumnFromValue` は value フィールドウェルから列を返します。複数のインデックスを渡すことで、各要素が values フィールドウェル内のフィールドに対応する配列の配列を取得できます。 + `getColorTheme` は、次の例に示すように、クイックテーマの現在のカラーパレットを返します。 ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **例** ![\[alt text not found\]](http://docs.aws.amazon.com/ja_jp/quick/latest/userguide/images/get-column-example.png) `getColumn` は、テーブルから任意の列にアクセスできます。 + `["getColumn", 0]` – 配列 `[1, 2, 3, 4, 5, ...]` を返します + `["getColumn", 1]` – 配列 `[1, 1, 1, 1, 1, ...]` を返します + `["getColumn", 2]` – 配列 `[1674, 7425, 4371, ...]` を返します `getColumnFromGroupBy` は同様に機能しますが、そのインデックスは group by フィールドウェルの列に制限されます。 + `["getColumnFromGroupBy", 0]` – 配列 `[1, 2, 3, 4, 5, ...]` を返します + `["getColumnFromGroupBy", 1]` – 配列 `[1, 1, 1, 1, 1, ...]` を返します + `["getColumnFromGroupBy", 2]` – group by フィールドウェルには 2 つの列しかないため、機能しません `getColumnFromValue` は同様に機能しますが、そのインデックスは value フィールドウェルの列に制限されます。 + `["getColumnFromValue", 0]` – 配列 `[1, 2, 3, 4, 5, ...]` を返します + `["getColumnFromValue", 1]` – value フィールドウェルには 1 つの列しかないため、機能しません + `["getColumnFromValue", 2]` – value フィールドウェルには 1 つの列しかないため、機能しません ## `formatValue` `formatValue` 式を使用して、クイックフォーマットを値に適用します。たとえば、次の式は、クイックフィールドウェルの最初のフィールドで指定された形式値を使用して x 軸ラベルをフォーマットします。 ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```