docs-lens-chart-page

Lens チャートのドキュメントページの作成

explore-analyze/visualize/charts/ に Kibana Lens のチャートタイプのドキュメントページを作成または更新する場合は、以下の手順に従ってください。

執筆前：設定をソースコードで確認する

ドキュメントを作成する前に、lens-chart-settings スキルを使用して、UI ラベル、オプション値、レンダリング順序を Kibana のソースコードで確認してください。UI ラベルを推測してはいけません。

調査リソース

Kibana のソースコードパス

チャートタイプ	ソースパス
パーティション（円、ドーナツ、ツリーマップ、モザイク、ワッフル）	x-pack/platform/plugins/shared/lens/public/visualizations/partition/
XY（棒、折れ線、エリア）	x-pack/platform/plugins/shared/lens/public/visualizations/xy/
メトリック	x-pack/platform/plugins/shared/lens/public/visualizations/metric/
データテーブル	x-pack/platform/plugins/shared/lens/public/visualizations/datatable/

多くのビジュアライゼーションでは、チャートごとに異なる props を受け取る共有コンポーネント（shared_components/ 内）を使用しています。共有コンポーネントのすべてのオプションが利用できると想定せず、必ずビジュアライゼーション固有のラッパーを確認して、渡される props を調べてください。

EUI データビジュアライゼーションのガイドライン

• 部分と全体の比較（円、ドーナツ、ツリーマップ）
• ダッシュボードのベストプラクティス
• カテゴリ別カラーパレット

確認する既存コンテンツ

• Lens のメインページ：explore-analyze/visualize/lens.md — 参照または重複を避けるためのコンテンツを確認してください。
• ほかのチャートページ：explore-analyze/visualize/charts/*.md — 既存のパターンに従ってください。
• 共有スニペット：explore-analyze/_snippets/lens-*.md — 内容を重複させず、再利用してください。

主なスニペット：

スニペット	用途
lens-prerequisites.md	前提条件の段落（データビュー、ES|QL モード）
lens-rank-by-options.md	上位の値のランク付けオプション
lens-value-advanced-settings.md	値／メトリックディメンションの詳細設定
lens-breakdown-advanced-settings.md	内訳の詳細設定
lens-histogram-settings.md	日付ヒストグラムの設定
line-chart-legend-settings.md	統計情報を含む凡例の設定（折れ線／エリア）
line-chart-style-settings.md	スタイル設定（折れ線／エリア）

新しいチャートページを作成する場合は、lens.md を更新してリンクを追加し、重複するコンテンツを削除してください。

ファイルの場所とフロントマター

次のフロントマターを使って、explore-analyze/visualize/charts/<chart-type>.md にファイルを配置してください。

---
navigation_title: <Chart type> charts
description: Instructions and best practices for building <chart type> charts with Kibana Lens in Elastic.
---

チャート固有のディメンション

チャートタイプ	主なディメンション	追加のディメンション
円／ドーナツ	Slice by、Metric	（なし）
棒／折れ線／エリア	Horizontal axis、Vertical axis	Breakdown
メトリック	Primary metric	Secondary metric、Maximum value
ゲージ	Metric	Minimum value、Maximum value、Goal
テーブル	Metrics、Rows	Split metrics by

ページの構成

以下の順序を厳密に守ってください。すべてのチャートページで一貫してこの構成を使用します。

1. タイトルと導入

# Build <chart type> charts with {{kib}}

• 1 つの段落（2～3 文）：チャートの機能と、役立つ場面を説明します。目的に焦点を当ててください。
• 具体的で実行可能な制約を織り込みます（例：「スライス数を 6 個以下にすると最適に機能します」）。一般的なアドバイスは避けてください。
• 「使用する場面」という独立したセクションは作成しないでください。
• 次の行を記載します：You can create <chart type> charts in {{kib}} using [**Lens**](../lens.md).
• 代表的な例を示すヒーロー画像を配置します。

2. 「 chart」セクション

ステッパーの前に前提条件のスニペットを含めます。

:::{include} ../../_snippets/lens-prerequisites.md
:::

次に、stepper ディレクティブを使用します。

::::::{stepper}

:::::{step} Access Lens
**Lens** is {{kib}}'s main visualization editor. You can access it:
- From a dashboard: On the **Dashboards** page, open or create the dashboard where you want to add a <chart type> chart, then add a new visualization.
- From the **Visualize library** page by creating a new visualization.
:::::

:::::{step} Set the visualization to <Chart type>
New visualizations often start as **Bar** charts.

Using the **Visualization type** dropdown, select **<Chart type>**.
:::::

:::::{step} Define the data to show
[Chart-specific data configuration steps]
:::::

:::::{step} Customize the chart to follow best practices
[Best practices as a definition list]
:::::

:::::{step} Save the chart
- If you accessed Lens from a dashboard, select **Save and return** to save the visualization and add it to that dashboard, or select **Save to library** to add the visualization to the Visualize library and reuse it later.
- If you accessed Lens from the Visualize library, select **Save**. A menu opens and offers you to add the visualization to a dashboard and to the Visualize library.
:::::

::::::

主な規約：

• Access Lens と Save the chart のステップは、すべてのチャートページで共通です。そのままコピーしてください。
• Define the data to show には、チャート固有のディメンションに関する番号付きの手順を記載し、その後に追加のディメンションを「Optionally:」として記載します。ディメンション名を設定セクションへのリンクにします（例：[**Slice by**](#slice-by-settings)）。
• Customize the chart は定義リスト形式にします。実践的なベストプラクティスを4～6項目記載し、最後に設定の完全なリファレンスへのリンクを示す行を追加します。

3. 高度なシナリオ（任意）

ユーザーが自分では気付きにくい、分かりにくい手法を説明する場合にのみ含めます。

• 数式の使用（例：エラー率をパーセンテージで計算する）
• 完了状況の進捗表示に向けた複数のメトリックの設定（ワッフル）
• データに基づく動的な境界値や目標値の設定（ゲージ）
• カスタムの色範囲の定義（ヒートマップ）
• しきい値を使った色の帯の設定（ゲージ）

「別のフィールドでチャートを使う」だけのシナリオは作成しないでください。よりシンプルな種類のチャートでは、Examples セクションで十分です。

シナリオを含める場合：

• 各シナリオに、アンカー ID を付けた独自の ## または ### 見出しを設定します。
• 可能な場合は、Kibana Sample Data を使った具体例を示します。

サンプルデータに関する考慮事項

• Web ログの response フィールドはテキストフィールドです。KQL フィルターでは数値比較ではなく、パターンマッチング（response: 2*）を使用する必要があります。
• サンプルの E コマースデータでは、taxful_total_price と taxless_total_price は同一です。
• 比較可能な数値フィールドはあまりありません。サンプルデータでシナリオを説明できない場合は、現実的なフィールド名を使った概念例を示し、ユーザーが自身のデータに合わせて調整する必要があることを説明する :::note を追加します。

4. 「 settings」セクション

Lens エディターの設定オプションをすべて、ディメンションまたはパネルごとに整理して記載します。

各ディメンションは次の構造にします。

### <Dimension> settings [<dimension>-settings]

各ディメンション内には、トップレベルの定義リスト項目を2つ使用します。**Data** と **Appearance** です。

Data：

• 利用可能な関数／集計タイプをすべて記載します。
• 関数ごとに、まずField セレクターを記載し、その後に関数固有のサブオプションをネストした箇条書きで記載します。
• Field セレクターの規約：
  • Top values：最大4つのフィールドをサポートします。複数のフィールドを指定すると、複数用語でグループ化されます。フィールドはドラッグして並べ替えられます。
  • Date histogram：日付フィールドは1つのみです。
  • Intervals：数値フィールドは1つのみです。
  • Filters：フィールドセレクターはありません（KQL クエリではフィールドを直接参照します）。
• 該当する場合は、共通スニペットを再利用します。

Appearance：

• Name、Value format、Color、Series color、Color mapping などの視覚的なオプションを記載します。

ディメンション固有の設定の後に、全体設定（{icon}`brush` Style と凡例）をまとめる ### General layout セクションを追加します。必要に応じて #### Style settings と #### Legend settings に分けます。

Legend settings はチャートの種類によって異なります。

設定	XY チャート	パーティションチャート	備考
表示	Yes	Yes	Auto / Show / Hide
位置	Yes	No	パーティションチャートでは location を渡しません
統計情報	Yes	No	defaultLegendStats で制御されます
入れ子の凡例	No	Yes（>1 グループ）	複数の Group by ディメンションが必要です
ラベルの切り詰め	Yes	Yes
幅	Yes	Yes	UI のラベルは「Width」であり、「Legend size」ではありません

5. 「 examples」セクション

• Kibana Sample Data を使った、実際に役立つ例を2～4件記載します。
• 太字の例のタイトルを使い、定義リスト形式にします。
• 各例は次の構成にします。
  • * Example based on: <sample data set name>
  • 箇条書きの設定キー（Slice by、Metric、Style、Legend など）
  • "=60%" または "=70%" のサイズ指定を付けた結果画像
• 異なる機能（例：基本設定、ドーナツ型のバリエーション、フィルター、複数のメトリック）を紹介します。

チャートページ固有の書式設定

一般的な構文については、docs-syntax-help スキルを参照してください。以下の規約はチャートページ固有のものです。

画像

• explore-analyze/images/<image-name>.png に保存します
• 次の形式で参照します：![Alt text](/explore-analyze/images/<image-name>.png "=60%")
• サイズ指定：小さなインライン画像には "=50%"、例には "=60%"、設定のスクリーンショットには "=70%" を使用します。
• 代替テキストは説明的なものにし、「スクリーンショット」は使わないでください。

アイコン

アイコン	構文	用途
スタイル／ブラシ	{icon}\brush``	スタイル設定パネル
レイヤー設定	{icon}\app_management``	レイヤー設定（9.3+/Serverless）
アクションメニュー	{icon}\boxes_horizontal``	レイヤーのアクションメニュー（9.0-9.2）
レイヤーを追加	{icon}\plus_in_square``	レイヤー追加ボタン

凡例アイコンには、次を使用します：![Legend icon](/explore-analyze/images/kibana-legend-icon.svg "")

相互参照

• その他のチャートタイプ：棒グラフ
• Lens ページ：Lens
• Lens の機能：用語に色を割り当てる
• サンプルデータ：サンプルデータ

内部リンク

手順から設定セクションへのリンク：

2. Configure the [**Slice by**](#slice-by-settings) dimension.
3. Configure the [**Metric**](#metric-settings) dimension.

該当する場合は、ベストプラクティスから高度なシナリオへのリンクを追加します。

変数

{{kib}}（Kibana）、{{es}}（Elasticsearch）、{{data-source}}（データビュー／データソース）を使用します。

チェックリスト

• フロントマターに navigation_title と description がある
• ヒーロー画像が存在し、参照されている
• 「チャートを作成」ステッパーで、標準の Access Lens／Save ステップを使用している
• ステッパーの前に前提条件のスニペットが含まれている
• すべての設定が Kibana のソースコードと照合されている（lens-chart-settings スキルを使用）
• Lens エディターのすべての設定が「設定」セクションに記載されている
• 該当する場合、共有スニペットが重複なく含まれている
• 例で Kibana Sample Data を使用し、画像も含めている
• 手順から設定セクションへの内部リンクがある
• ベストプラクティスから関連する高度なシナリオへのリンクがある
• lens.md が更新され、新しいページへのリンクがある