From 21dd025e27e90403f7ef8a01b28d0f056c282ceb Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Wed, 2 Oct 2024 03:05:19 +0300 Subject: [PATCH] Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2024.10.2.1 --- .../charts/features/chart-axis-types.md | 21 +- .../charts/features/chart-data-selection.md | 8 + jp/components/charts/types/data-pie-chart.md | 214 +++++++++++++ jp/components/charts/types/radial-chart.md | 6 + jp/components/general-changelog-dv.md | 49 ++- .../interactivity/accessibility-compliance.md | 297 ++++++++---------- jp/components/radial-gauge.md | 17 +- 7 files changed, 441 insertions(+), 171 deletions(-) create mode 100644 jp/components/charts/types/data-pie-chart.md diff --git a/jp/components/charts/features/chart-axis-types.md b/jp/components/charts/features/chart-axis-types.md index b44c56bd79..eb8a76722d 100644 --- a/jp/components/charts/features/chart-axis-types.md +++ b/jp/components/charts/features/chart-axis-types.md @@ -13,8 +13,8 @@ Ignite UI for Angular カテゴリ チャートは、[`IgxCategoryXAxisComponent ## デカルト軸 -デカルト軸を持つ [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) では3 種類の X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。 -([`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html)、[`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html)、および [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html)) と 2 種類の Y 軸 ([`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) および [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html))。 +デカルト軸を持つ [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) では 3 つのタイプの X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。 +([`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html)、[`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html)、および [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html)) と 2 つのタイプの Y 軸 ([`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) および [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html))。 ### カテゴリ X 軸 @@ -129,7 +129,7 @@ Ignite UI for Angular カテゴリ チャートは、[`IgxCategoryXAxisComponent ### カテゴリ角度軸 -[`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。 +[`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。 [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) は通常、[ラジアル シリーズ](../types/radial-chart.md)をプロットするために [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) と共に使用されます。 @@ -142,6 +142,21 @@ Ignite UI for Angular カテゴリ チャートは、[`IgxCategoryXAxisComponent +### 比例カテゴリ角度軸 + +`ProportionalCategoryAngleAxis` は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。 + +`ProportionalCategoryAngleAxis` は通常、[`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) と一緒に使用され、円チャートをプロットします (例: [ラジアル シリーズ](../types/radial-chart.md))。 + +次の例は、`ProportionalCategoryAngleAxis` タイプの使用方法を示しています。 + + + + + ### 数字角度軸 [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。[`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) のラベルの位置は、[極座標シリーズ](../types/polar-chart.md) オブジェクトの `RadiusMemberPath` プロパティまたは[ラジアル シリーズ](../types/radial-chart.md) オブジェクトの `ValueMemberPath` プロパティを使用してマップされたデータ列の値によって異なります。 diff --git a/jp/components/charts/features/chart-data-selection.md b/jp/components/charts/features/chart-data-selection.md index 546bc76548..4f569aa816 100644 --- a/jp/components/charts/features/chart-data-selection.md +++ b/jp/components/charts/features/chart-data-selection.md @@ -81,6 +81,14 @@ Angular {ComponentTitle} の Ignite UI for Angular 選択機能を使用する +## プログラムによる選択 + +チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) の `SelectedSeriesCollection` に項目を追加することで実現できます。`ChartSelection` オブジェクトの `Matcher` プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 + +マッチャーは、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) のように実際のシリーズにアクセスできない場合、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを `SelectedSeriesItems` コレクションに追加できます。 + +たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。 + ## API リファレンス 以下は上記のセクションで説明した API メンバーのリストです。 diff --git a/jp/components/charts/types/data-pie-chart.md b/jp/components/charts/types/data-pie-chart.md new file mode 100644 index 0000000000..7ca94a2088 --- /dev/null +++ b/jp/components/charts/types/data-pie-chart.md @@ -0,0 +1,214 @@ +--- +title: Angular 円チャートとグラフ | Ignite UI for Angular +_description: Ignite UI for Angular データ円チャートは、セクションに分割された円形の領域で構成される、円チャートを表示するための UI コントロールです。無料でお試しください。 +_keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend, Angular チャート, 円チャート, インフラジスティックス, データ バインディング, スライスの選択, アニメーション, ハイライト表示, 凡例 +mentionedTypes: ["XamDataPieChart", "XamDataChart"] +namespace: Infragistics.Controls.Charts +_language: ja +--- + +# Angular Data Pie Chart (データ円チャート) + +Ignite UI for Angular データ円チャートは、データ セットのカテゴリ (部分) がどのように合計 (全体) 値に構成されるかを示す部分対全体のチャートです。カテゴリは、円形または円グラフのセクションとして表示されます。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。カテゴリは、分析されている合計値に対する値のパーセンテージ (100 または 100% の一部) に基づいて、他のカテゴリに比例して表示されます。 + +## Angular データ円チャートの例 + +データ項目を文字列と数値データでバインドすることで、`XamDataPieChart` の Angular 円チャートが作成できます。これらのデータ値を足すと可視化率100%になります。 + + + + + +
+ +## Angular データ円チャートの推奨事項 + +円チャートは小さなデータ セットに適しており、一目で読みやすいです。円チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。 + +* ドーナツ (リング) +* ファンネル +* 積層型エリア +* 積層型 100% エリア (積層型パーセンテージ エリア) +* 積層型棒 +* 積層型 100% 棒 (積層型パーセンテージ棒) +* ツリーマップ +* ウォーターフォール + +Angular データ円チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。 + +* 凡例 +* スライスの選択 +* スライスのハイライト表示 +* チャート アニメーション + +円チャートのベスト プラクティス: + +* スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。 +* カテゴリのグループがどのように小さなセグメントに分割されるかを示します。 +* 小規模で階層化されていないデータ セット (6 ～ 8 セグメント未満のデータ) を提示します。 +* データ セグメントの合計が 100% になるようにします。 +* データの順序を最大 (最高) から最小 (最低) に並べます。 +* 12 時の位置から始めて時計回りに続けるなどの標準的なプレゼンテーション手法を使用します。 +* パーツのセグメント/スライスでカラー パレットを区別できるようにします。 +* 読みやすさを考慮して、セグメント内のデータ ラベルと凡例を比較します。 +* 理解しやすさに基づいて、円チャートの代わりに棒やリング などのチャートを選択します。 +* 比較分析のために複数の円チャートを隣り合わせに配置することは避けます。 + +以下の場合に円チャートを使用しないでください。 + +* 時間の経過に伴う変化を比較する場合は、棒、折れ線、またはエリア チャートを使用します。 +* 正確なデータ比較が必要な場合は、棒、折れ線、またはエリア チャートを使用します。 +* 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、棒、折れ線、またはエリア チャートを検討してください。 +* 棒チャートで、ビューアが値の違いを認識しやすくなります。 + +## Angular データ円チャートの凡例 + +凡例は、各ポイントに関する情報を表示し、合計に対する各ポイントの貢献度を知るために使用されます。 + +円チャートの隣に凡例を表示するには、ItemLegend を作成し、[`IgxLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html) プロパティに割り当てます。ItemLegend はデフォルトでは項目を縦方向に表示しますが、これは [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html#orientation) プロパティを設定することで変更できます。 + +凡例に表示されるラベルには、デフォルトで `XamDataPieChart` の各スライスに表示されるラベルと同じ内容が表示されますが、チャートの `LegendSliceLabelContentMode` プロパティを使用してこれを変更できます。これにより、ラベル、値、パーセンテージ、またはそれらの任意の組み合わせをチャート内の各スライスの凡例のコンテンツとして表示できる列挙が公開されます。 + +ItemLegend バッジを変更することもできます。デフォルトでは、関連付けられているチャートのスライスの色に対応する塗りつぶされた円として表示されます。これを設定するには、チャートの [`legendItemBadgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) プロパティを使用し、円、折れ線、棒、縦棒などに設定できます。 + +以下は、`XamDataPieChart` での ItemLegend の使用例です。 + + + + + +
+ +## Angular 円チャートのその他カテゴリ + +円チャートの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。 + +`XamDataPieChart` の「その他」カテゴリには、[`OthersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.otherscategorytype.html)、`OthersCategoryThreshold`、`OthersCategoryText` という 3 つの主要な構成可能なプロパティがあり、これらを使用して、チャート内の「その他」スライスの表示方法を構成できます。これらについては、それぞれ以下で説明します。 + +[`OthersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.otherscategorytype.html) プロパティは、`XamDataPieChart` の `OthersCategoryThreshold` プロパティと連動して機能します。[`OthersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.otherscategorytype.html) では、`OthersCategoryThreshold` を数値として評価するか、パーセンテージとして評価するかを定義できます。たとえば、数値を選択し、`OthersCategoryThreshold` を 5 に設定すると、5 未満の値を持つスライスはすべて「その他」カテゴリの一部になります。パーセント タイプで同じ値 5 を使用すると、`XamDataPieChart` の合計値の 5 パーセント未満の値はすべて「その他」カテゴリの一部になります。 + +デフォルトでは、「その他」スライスは「その他」というラベルで表されます。チャートの `OthersCategoryText` プロパティを変更することでこれを変更できます。 + +`XamDataPieChart` に「その他」カテゴリが表示されないようにするには、`OthersCategoryThreshold` を 0 に設定します。 + +以下のサンプルは、`XamDataPieChart` 内の Others スライスの使用方法を示しています。 + + + + + +
+ +## Angular データ円チャートの選択 + +`XamDataPieChart` は、チャートにプロットされたスライスをマウスでクリックしてスライスを選択できる機能をサポートしています。これは、以下で説明するチャートの `SelectionBehavior` プロパティと `SelectionMode` プロパティを利用して構成できます。 + +`SelectionBehavior` の主な 2 つのオプションは `PerDataItemSingleSelect` と `PerDataItemMultiSelect` で、それぞれ単一選択と複数選択を有効にします。 + +`SelectionMode` プロパティは、円チャートのスライスが選択された場合にどのように反応するかを決定します。以下はその列挙体のオプションとその機能です。 + +* `Brighten`: 選択したスライスがハイライト表示されます。 +* `FadeOthers`: 選択したスライスは同じ色のまま残り、他のスライスは色が薄くなります。 +* `FocusColorFill`: 選択したスライスの背景がチャートの FocusBrush に変更されます。 +* `FocusColorOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。 +* `FocusColorThickOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。 +* `GrayscaleOthers`: 選択されていないスライスにはグレー色のフィルターが適用されます。 +* `None`: 選択されたスライスには影響はありません。 +* `SelectionColorFill`: 選択されたスライスの背景がチャートの SelectionBrush に変更されます。 +* `SelectionColorOutline`: 選択されたスライスには、チャートの SelectionBrush によって定義された色のアウトラインが表示されます。 +* `SelectionColorThickOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。 +* `ThickOutline`: 選択されたスライスには、チャートの Thickness プロパティに応じて太さが異なるアウトラインが適用されます。 + +スライスが選択されると、その基になるデータ項目がチャートの SelectedSeriesItems コレクションに追加されます。そのため、XamDataPieChart は SelectedSeriesItemsChanged イベントを公開して、スライスが選択されてこのコレクションが変更されたことを検出します。 + +以下のサンプルは、`XamDataPieChart` コントロールの選択機能を示しています。 + + + + + +
+ +## Angular データ円チャートのハイライト表示 + +`XamDataPieChart` は、マウス オーバーによるハイライト表示と、別のデータ ソースを提供することで設定できるハイライト表示オーバーレイをサポートしています。 + +[`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingBehavior) 列挙プロパティは、スライスがどのようにハイライト表示されるかを決定します。以下はそのプロパティのオプションとその機能です。 + +* `DirectlyOver`: スライスは、マウスがその上に直接置かれている場合にのみハイライト表示されます。 +* `NearestItems`: マウスの位置に最も近いスライスがハイライト表示されます。 +* `NearestItemsAndSeries`: マウスの位置に最も近いスライスとシリーズがハイライト表示されます。 +* `NearestItemsRetainMainShapes`: マウスの位置に最も近い項目がハイライト表示され、シリーズのメイン図形はハイライト表示されなくなります。 + +[`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) 列挙プロパティは、データ円チャートのスライスがハイライト表示されたときにどのように反応するかを決定します。以下はそのプロパティのオプションとその機能です。 + +* `Brighten`: マウスの位置がそのシリーズ上または近くにあると、そのシリーズの色が明るくなります。 +* `BrightenSpecific`: マウスの位置が特定のスライスの上または近くにある場合、そのスライスの色が明るくなります。 +* `FadeOthers`: マウスの位置がそのシリーズ上または近くにある場合、そのシリーズは色を保持しますが、他の部分は薄く表示されます。 +* `FadeOthersSpecific`: マウスの位置がそのスライスの上または近くにある場合、そのスライスの色は保持されますが、他のスライスの色は薄く表示されます。 +* `None`: シリーズとスライスはハイライト表示されません。 + +以下の例は、`XamDataPieChart` コンポーネントのマウスハイライト表示の動作を示しています。 + + + + + +マウスのハイライト表示に加えて、`XamDataPieChart` はデータのサブセットを表示できるハイライト表示フィルター機能を公開します。これは、コントロールの `HighlightedDataSource` を指定し、[`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) プロパティを `Overlay` に設定することによって適用されます。`HighlightedDataSource` は、`XamDataPieChart` の `DataSource` プロパティに割り当てられたデータのサブセットを想定しています。 + +これらの条件が満たされると、サブセットの値がハイライト表示され、データの全セットの残りの部分はフェードアウトされます。これにより、サブセットが効果的にハイライトされ、同じコントロール内でデータのサブセットをより簡単に視覚化できるようになります。 + +
+ +## Angular データ円チャートのアニメーション + +`XamDataPieChart` は、スライスの表示や値の変更時のアニメーション化をサポートしています。 + +`IsTransitionInEnabled` プロパティを **true** に設定すると、円チャートがアニメーションで表示されます。実行されるアニメーションのタイプは、`TransitionInMode` 列挙プロパティを表示したいアニメーションのタイプに設定することで構成できます。さらに、[`TransitionInSpeedType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.transitioninspeedtype.html) プロパティを、インデックス、値、通常、またはランダム化でスケー​​ルするように設定することもできます。このアニメーションの期間は、`TimeSpan` を受け取る `TransitionInDuration` プロパティで制御できます。 + +データの変更をアニメーション化する場合は、[`animateSeriesWhenAxisRangeChanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#animateSeriesWhenAxisRangeChanges) プロパティを **true** に設定することでも実行できます。この変更の期間は、`TransitionDuration` プロパティを設定することでも構成できます。 + +以下のは、`XamDataPieChart` コントロールでのアニメーションを使用する方法を示しています。 + + + + + +
+ +## その他のリソース + +* [ドーナツ チャート](donut-chart.md) +* [極座標チャート](polar-chart.md) +* [ラジアル チャート](radial-chart.md) + +## API リファレンス + +以下のテーブルは、上記のセクションで説明した API メンバーをリストします。 + +* `OthersCategoryThreshold` +* [`OthersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.otherscategorytype.html) +* `SelectionMode` + +|チャート タイプ | コントロール名 | API メンバー | +|-----------------|----------------|------------ | +|データ円チャート | `XamDataPieChart` | `XamDataPieChart` | +|項目凡例 | [`IgxItemLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | [`IgxItemLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | diff --git a/jp/components/charts/types/radial-chart.md b/jp/components/charts/types/radial-chart.md index f4f10cdab0..95860b4e76 100644 --- a/jp/components/charts/types/radial-chart.md +++ b/jp/components/charts/types/radial-chart.md @@ -76,6 +76,12 @@ Ignite UI for Angular ラジアル折れ線チャートは、データ ポイン +
+ +## Angular ラジアル チャートの設定 + +さらに、ラベルはチャートの近くまたは広い位置に表示されるように設定できます。これは、[`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) の `LabelMode` プロパティで設定できます。 +
## その他のリソース diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index 5256b1333b..37d0cb9df6 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -2,7 +2,7 @@ title: Angular 新機能 | Ignite UI for Angular | インフラジスティックス _description: Ignite UI for Angular の新機能について学んでください。 _keywords: Changelog, What's New, Ignite UI for Angular, Infragistics, 変更ログ, 新機能, インフラジスティックス -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] namespace: Infragistics.Controls.Charts _language: ja --- @@ -15,7 +15,49 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 > このトピックでは、igniteui-angular パッケージに含まれていないコンポーネントの変更についてのみ説明します。 > igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。 -* [Ignite UI for Angular 変更ログ](https://github.com/igniteui/igniteui-angular/blob/master/changelog.md) +* [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) + +## **18.1.0 (September 2024)** + +* [データ円チャート](charts/types/data-pie-chart.md) - `DataPieChart` は円ャートを表示する新しいコンポーネントです。このコンポーネントは、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。 + +* [比例カテゴリ角度軸](charts/types/radial-chart.md) - [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。 + +* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) + + * 新しい ToolActionCheckboxList + 選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。 + + * 新しいフィルタリングのサポート + + * 軸フィールドの変更 + CategoryChart をターゲットにする場合のツールバーの新しいデフォルトの IconMenu。 + ラベル フィールドは X 軸にマップされ、値フィールドは Y 軸にマップされます。 + ターゲット チャートは、行われた変更にリアルタイムで反応します。チャートに ItemsSource が設定されていない場合、IconMenu は非表示になります。 + +## **18.0.0 (June 2024)** + +* Angular 18 のサポート。 + +### igniteui-angular-charts (チャート) + +* [データ凡例のグループ化](charts/features/chart-data-legend.md#angular-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#angular-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。`GroupRowVisible` プロパティは、各シリーズのグループ化を切り替え、オプトインすると `DataLegendGroup` プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。 + + + +* [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) および [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。 + 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと `SelectedSeriesItems` は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。 + +* [ツリーマップのハイライト表示](charts/types/treemap-chart.md#angular-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、[`highlightingTransitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) プロパティを使用して制御できます。 + +* [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#angular-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい `HighlightedItemsSource` を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。[`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) で切り替えることができ、`FillBrushes` でスタイルを設定できます。 + +* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい `IsHighlighted` オプション。 + +### igniteui-angular-gauges (ゲージ) + +* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + * ハイライト針の新しいラベル。`HighlightLabelText` と `HighlightLabelSnapsToNeedlePivot` および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。 ## **18.0.0 (June 2024)** @@ -237,8 +279,7 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 #### チャート凡例 -\*バブル、ドーナツ、および円チャートで使用できる水平方向の [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) プロパティを ItemLegend に追加しました。 - +* バブル、ドーナツ、および円チャートで使用できる水平方向の [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) プロパティを ItemLegend に追加しました。 * [`legendHighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendHighlightingMode) プロパティを追加 - 凡例項目にカーソルを合わせたときにシリーズのハイライト表示を有効にします。 ### igniteui-angular-maps (GeoMap) diff --git a/jp/components/interactivity/accessibility-compliance.md b/jp/components/interactivity/accessibility-compliance.md index 5e2c611a2a..481b2615f1 100644 --- a/jp/components/interactivity/accessibility-compliance.md +++ b/jp/components/interactivity/accessibility-compliance.md @@ -1,7 +1,9 @@ --- -title: Ignite UI for Angular アクセシビリティ準拠 | Ignite UI for Angular | インフラジスティックス +title: Ignite UI for Angular アクセシビリティの遵守 | Ignite UI for Angular | インフラジスティックス _description: Ignite UI for Angular のアクセシビリティ準拠 - 第 508 条の遵守、WCAG および ARIA。 -_keywords: アクセシビリティ準拠, angular, ignite ui for angular, インフラジスティックス +_keywords: accessibility, Angular, ignite ui for Angular, infragistics, アクセシビリティ準拠, インフラジスティックス +mentionedTypes: [] +_language: ja --- # アクセシビリティ準拠 + 開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の Angular チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。私たちの目標は、ユーザーにとって最高のアプリケーションとユーザー エクスペリエンスの作成に集中できるようにすることです。 ここでは、Ignite UI for Angular 内の Angular グリッド、チャート、UI コンポーネントおよびコントロールのアクセシビリティ サポートと準拠に関する特定の情報を見つけることができます。 ## 第 508 条の遵守 + リハビリテーション法[第 508 条](http://www.section508.gov/)は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェア ソリューションを提供し、Web ページを設計する際にも重要となります。 第 508 条の第 1194 部 22 条は、特に Web ベースのイントラネットおよびインターネット情報およびシステムを対象としており、遵守すべき 16 の規則が含まれています。お客様の最小限の努力でお客様の Web アプリケーションおよび Web サイトがこれらの規則に整合できるようにするために、インフラジスティックスは、Ignite UI for Angular のコントロールおよびコンポーネントが該当するアクセシビリティ規則に準拠することを保証するための取り組みを続けてきました。 @@ -31,191 +35,158 @@ _keywords: アクセシビリティ準拠, angular, ignite ui for angular, イ |**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| |*グリッド*||||||||||||||||| -| - Grid||||||||||*||||||| -| - HierarchicalGrid||||||||||*||||||| -| - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| -| - Avatar||||||||||||||||| -| - Badge||||||||||||||||| -| - Banner||||||||||*||||||| -| - Bottom navigation||||||||||*||||||| -| - Button||||||||||*||||||| -| - Button group||||||||||*||||||| -| - Calendar||||||||||*||||||| -| - Card||||||||||||||||| -| - Carousel||||||||||*||||||| -| - Checkbox||||||||||||||||| -| - Chip||||||||||*||||||| -| - Circular progress||||||||||*||||||| -| - Combo||||||||||*||||||| -| - Date time editor||||||||||*||||||| -| - Date picker||||||||||*||||||| -| - Divider||||||||||||||||| -| - Dialog||||||||||*||||||| -| - Drop down||||||||||*||||||| -| - Expansion panel||||||||||*||||||| -| - Icon||||||||||||||||| -| - Input||||||||||||||||| -| - Input group||||||||||*||||||| -| - Label||||||||||||||||| -| - Linear progress||||||||||*||||||| -| - List||||||||||||||||| -| - Month picker||||||||||*||||||| -| - Navbar||||||||||*||||||| -| - Navigation drawer||||||||||*||||||| -| - Radio group||||||||||||||||| -| - Radio||||||||||||||||| -| - Select||||||||||*||||||| -| - Slider||||||||||*||||||| -| - Snackbar||||||||||*||||||| -| - Switch||||||||||*||||||| -| - Tabs||||||||||*||||||| -| - Time picker||||||||||*||||||| -| - Toast||||||||||*||||||| -| - Tooltip||||||||||*||||||| - - +| - Grid||||||||||*||||||| +| - HierarchicalGrid||||||||||*||||||| +| - TreeGrid||||||||||*||||||| +|*その他*||||||||||*||||||| +| - Avatar||||||||||||||||| +| - Badge||||||||||||||||| +| - Bottom navigation||||||||||*||||||| +| - Button||||||||||*||||||| +| - Button group||||||||||*||||||| +| - Calendar||||||||||*||||||| +| - Card||||||||||||||||| +| - Carousel||||||||||*||||||| +| - Checkbox||||||||||||||||| +| - Chip||||||||||*||||||| +| - Circular progress||||||||||*||||||| +| - Combo||||||||||*||||||| +| - Date time input||||||||||*||||||| +| - Date picker||||||||||*||||||| +| - Divider||||||||||||||||| +| - Dialog||||||||||*||||||| +| - Drop down||||||||||*||||||| +| - Expansion panel||||||||||*||||||| +| - Icon||||||||||||||||| +| - Input||||||||||||||||| +| - Input group||||||||||*||||||| +| - Linear progress||||||||||*||||||| +| - List||||||||||||||||| +| - Navbar||||||||||*||||||| +| - Navigation drawer||||||||||*||||||| +| - Radio group||||||||||||||||| +| - Radio||||||||||||||||| +| - Select||||||||||*||||||| +| - Slider||||||||||*||||||| +| - Snackbar||||||||||*||||||| +| - Switch||||||||||*||||||| +| - Tabs||||||||||*||||||| +| - Time picker||||||||||*||||||| +| - Toast||||||||||*||||||| **凡例** |||| |---|---|---| -||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| -|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。| 例: *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| -||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| +||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| +|\*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。| 例: *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| +||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| |'空白'|この特定の規則はコントロールに適用されません。|| -> [!WARNING] -> 上記のテーブルは、Ignite UI for Angular テーマ ライブラリの*デフォルト テーマ*にのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 - - ### 法令遵守情報 - -- **a** - あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 -- **b** - マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 -- **c** - 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 -- **d** - ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。 -- **e** - サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。 -- **f** - その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。 -- **g** - 行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。 -- **h** - マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。 -- **i** - フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。 -- **j** - ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。 -- **k** - その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。 -- **l** - ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。 -- **m** - ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。 -- **n** - オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。 -- **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。 -- **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。 +> \[!WARNING] +> 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 +### 法令遵守情報 + +* **a** - あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 +* **b** - マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 +* **c** - 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 +* **d** - ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。 +* **e** - サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。 +* **f** - その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。 +* **g** - 行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。 +* **h** - マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。 +* **i** - フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。 +* **j** - ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。 +* **k** - その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。 +* **l** - ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。 +* **m** - ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。 +* **n** - オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。 +* **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。 +* **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。 ## WCAG の準拠 -[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。 これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。 + +[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。WCAG は主に HTML のアクセシビリティに焦点を当てます。 |**コンポーネント/ガイドライン**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| |*グリッド*|||||||||||||| -| - Grid|||||||*||||*||| -| - HierarchicalGrid|||||||*||||*||| -| - TreeGrid|||||||*||||*||| -|*その他*|||||||*||||||| -| - Avatar|||||||||||*||| -| - Badge|||||||||||*||| -| - Banner||||||*|*||||*||| -| - Bottom navigation|||||||*||||*||| -| - Button|||||||*||||*||| -| - Button group|||||||*||||*||| -| - Calendar||||||*|*||||*||| -| - Card|||||||||||*||| -| - Carousel||||||*|*||||*||| -| - Checkbox|||||||||||*||| -| - Chip|||||||*||||*||| -| - Circular progress||||||*|*||||*||| -| - Combo||||||*|*||||*||| -| - Date time editor||||||*|*||||*||| -| - Date picker||||||*|*||||*||| -| - Divider|||||||||||*||| -| - Dialog||||||*|*||||*||| -| - Drop down||||||*|*||||*||| -| - Expansion panel||||||*|*||||*||| -| - Icon|||||||||||*||| -| - Input|||||||||||*||| -| - Input group|||||||*||||*||| -| - Label|||||||||||*||| -| - Linear progress||||||*|*||||*||| -| - List|||||||||||*||| -| - Month picker||||||*|*||||*||| -| - Navbar|||||||*||||*||| -| - Navigation drawer||||||*|*||||*||| -| - Radio group|||||||||||*||| -| - Radio|||||||||||*||| -| - Select||||||*|*||||*||| -| - Slider|||||||*||||*||| -| - Snackbar||||||*|*||||*||| -| - Switch|||||||*||||*||| -| - Tabs|||||||*||||*||| -| - Time picker||||||*|*||||*||| -| - Toast||||||*|*||||*||| -| - Tooltip||||||*|*||||*||| - +| - Grid|||||||*||||*||| +| - HierarchicalGrid|||||||*||||*||| +| - TreeGrid|||||||*||||*||| +|*その他*|||||||*||||||| +| - Avatar|||||||||||*||| +| - Badge|||||||||||*||| +| - Banner||||||*|*||||*||| +| - Bottom navigation|||||||*||||*||| +| - Button|||||||*||||*||| +| - Button group|||||||*||||*||| +| - Calendar||||||*|*||||*||| +| - Card|||||||||||*||| +| - Carousel||||||*|*||||*||| +| - Checkbox|||||||||||*||| +| - Chip|||||||*||||*||| +| - Circular progress||||||*|*||||*||| +| - Combo||||||*|*||||*||| +| - Date time editor||||||*|*||||*||| +| - Date picker||||||*|*||||*||| +| - Divider|||||||||||*||| +| - Dialog||||||*|*||||*||| +| - Drop down||||||*|*||||*||| +| - Expansion panel||||||*|*||||*||| +| - Icon|||||||||||*||| +| - Input|||||||||||*||| +| - Input group|||||||*||||*||| +| - Label|||||||||||*||| +| - Linear progress||||||*|*||||*||| +| - List|||||||||||*||| +| - Month picker||||||*|*||||*||| +| - Navbar|||||||*||||*||| +| - Navigation drawer||||||*|*||||*||| +| - Radio group|||||||||||*||| +| - Radio|||||||||||*||| +| - Select||||||*|*||||*||| +| - Slider|||||||*||||*||| +| - Snackbar||||||*|*||||*||| +| - Switch|||||||*||||*||| +| - Tabs|||||||*||||*||| +| - Time picker||||||*|*||||*||| +| - Toast||||||*|*||||*||| +| - Tooltip||||||*|*||||*||| **凡例** |||| |---|---|---| -||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| -|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。|例 1: ガイドライン 2.2. 特定のコンポーネントでは、追加のアクションと時間パラメーターを設定する必要があります。例 2: ガイドライン 2.3. *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| -||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| +||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| +|\*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。|例 1: ガイドライン 2.2. 特定のコンポーネントでは、追加のアクションと時間パラメーターを設定する必要があります。例 2: ガイドライン 2.3. *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| +||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| |'空白'|この特定の規則はコントロールに適用されません。|| -> [!WARNING] -> 上記のテーブルは、Ignite UI for Angular テーマ ライブラリの*デフォルト テーマ*にのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 +> \[!WARNING] +> 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 ### 法令遵守情報 -- **原則 1 - 知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できるように提示されなければなりません。 - - ガイドライン 1.1 – **代替テキスト** - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。 - - ガイドライン 1.2 – **時間ベースのメディア** - 時間ベースのメディアの代替物を提供します。 - - ガイドライン 1.3 – **適応可能** - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。 - - ガイドライン 1.4 – **識別可能** - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。 -- **原則 2 – 操作可能** - ユーザー インターフェイス コンポーネントとナビゲーションは操作可能でなければなりません。 - - ガイドライン 2.1 – **キーボードでアクセス可能** - すべての機能をキーボードで使用できるようにします。 - - ガイドライン 2.2 – **十分な時間** - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。 - - ガイドライン 2.3 – **発作と身体的な反応** - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。 - - ガイドライン 2.4 – **ナビゲート可能** - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。 - - ガイドライン 2.5 – **入力モダリティ** - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。 -- **原則 3 – 理解可能** - ユーザー インターフェイスの情報と操作は理解可能でなければなりません。 - - ガイドライン 3.1 – **可読** - テキスト コンテンツを読みやすく、理解しやすくします。 - - ガイドライン 3.2 – **予測可能** - Web ページを予測可能な方法で表示して動作させる。 - - ガイドライン 3.3 – **入力支援** - ユーザーが間違いを回避して修正できるようにします。 -- **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。 - - ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。 - +* **原則 1 - 知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できるように提示されなければなりません。 + * ガイドライン 1.1 – **代替テキスト** - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。 + * ガイドライン 1.2 – **時間ベースのメディア** - 時間ベースのメディアの代替物を提供します。 + * ガイドライン 1.3 – **適応可能** - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。 + * ガイドライン 1.4 – **識別可能** - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。 +* **原則 2 – 操作可能** - ユーザー インターフェイス コンポーネントとナビゲーションは操作可能でなければなりません。 + * ガイドライン 2.1 – **キーボードでアクセス可能** - すべての機能をキーボードで使用できるようにします。 + * ガイドライン 2.2 – **十分な時間** - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。 + * ガイドライン 2.3 – **発作と身体的な反応** - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。 + * ガイドライン 2.4 – **ナビゲート可能** - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。 + * ガイドライン 2.5 – **入力モダリティ** - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。 +* **原則 3 – 理解可能** - ユーザー インターフェイスの情報と操作は理解可能でなければなりません。 + * ガイドライン 3.1 – **可読** - テキスト コンテンツを読みやすく、理解しやすくします。 + * ガイドライン 3.2 – **予測可能** - Web ページを予測可能な方法で表示して動作させる。 + * ガイドライン 3.3 – **入力支援** - ユーザーが間違いを回避して修正できるようにします。 +* **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。 + * ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。 ## WAI-ARIA サポート -2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/) を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。 - -このセクションでは、フレームワークのアクセシビリティ (ARIA) サポートと、コンポーネントの`文字表記の方向`の簡単な管理を示します。 - -### 右から左方向 (RTL) の有効化 - -`Ignite UI for Angular` ライブラリは、`html` または `body` タグの `dir` 属性を設定した場合のみ `文字表記の方向`操作の影響を受けます。 - -次の例に移動します。 - -```html - -... - - - -``` - ->[!NOTE] -> 上記の場合、`body` タグの内部属性タグが優先されます。 - -### RTL サポート - -右から左 (RTL) 方向は、デフォルトですべての Ignite UI テーマで完全にサポートされています。 ->[!NOTE] ->現在、`Igx-Grid` コンポーネントは部分的な RTL サポートしかありません。 +2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/)を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。 diff --git a/jp/components/radial-gauge.md b/jp/components/radial-gauge.md index 519f1dbb5d..36bb49fde6 100644 --- a/jp/components/radial-gauge.md +++ b/jp/components/radial-gauge.md @@ -143,10 +143,12 @@ export class AppModule {} -## ラベル +## ラベルとタイトル ゲージ ラベルは [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#minimumValue) と [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#maximumValue) の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す [`labelExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#labelExtent) プロパティで小数を使用してラベルの配置を設定できます。[`fontBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#fontBrush) や [`font`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#font) など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。 +これらの針のラベルにはそれぞれ、`TitleExtent`、`TitleAngle`、`SubtitleFontSize`、`HighlightLabelBrush` など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。 + ```html +## タイトルとサブタイトル + +`TitleText` プロパティと `SubtitleText` プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、`TitleDisplaysValue` と `SubtitleDisplaysValue` を true に設定すると、針の値が表示され、`TitleText` と `SubtitleText` がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。 + +以下に説明するように針のハイライトが表示されている場合は、`HighlightLabelText` を介してカスタム テキストを表示できます。それ以外の場合は、`HighlightLabelDisplaysValue` を有効にしてその値を表示できます。 + +```html + + +``` + ## オプティカル スケーリング ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず `OpticalScalingEnabled` を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する `OpticalScalingSize` を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。