Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions doc/jp/components/dashboard-tile.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
---
title: {Platform} Dashboard Tile コンポーネント – {ProductName}
_description: {Platform} Dashboard Tile コンポーネントを簡単に使い始める方法をご覧ください。
_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Dashboard components, {Platform} Dashboard Tile controls, UI コントロール, {Platform} ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Dashboard コンポーネント, {Platform} Dashboard Tile コントロール
mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"]
_language: ja
---

# {Platform} Dashboard Tile (ダッシュボード タイル) の概要

{Platform} Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの `Toolbar` で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。

提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。

ツールバー内のチャート タイプ メニューを操作すると、候補リストの中から異なる視覚化を選択できます。

## {Platform} Dashboard Tile の例

<!-- TODO -->
`sample="/charts/dashboard-tile/overview", height="600", alt="{Platform} Dashboard Tile の例"`

## 依存関係

<!-- Angular, WebComponents, React -->
{ProductName} ツールセットに次のパッケージをインストールします:

```cmd
npm install {PackageCharts}
npm install {PackageCore}
npm install {PackageDashboards}
npm install {PackageGauges}
npm install {PackageGrids}
npm install {PackageInputs}
npm install {PackageLayouts}
npm install {PackageMaps}
```

Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします:

```ts
import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule,
IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule,
IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards";

@NgModule({
imports: [
IgxDataChartDashboardTileModule,
IgxRadialGaugeDashboardTileModule,
IgxLinearGaugeDashboardTileModule,
IgxGeographicMapDashboardTileModule,
IgxPieChartDashboardTileModule,
IgxDashboardTileModule
]
})
export class AppModule {}
```

```ts
import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrRadialGaugeDashboardTileModule,
IgrLinearGaugeDashboardTileModule, IgrGeographicMapDashboardTileModule,
IgrPieChartDashboardTileModule } from "igniteui-react-dashboards";

IgrDataChartDashboardTileModule.register();
IgrRadialGaugeDashboardTileModule.register();
IgrLinearGaugeDashboardTileModule.register();
IgrGeographicMapDashboardTileModule.register();
IgrPieChartDashboardTileModule.register();
IgrDashboardTileModule.register();
```

```ts
import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcRadialGaugeDashboardTileModule,
IgcLinearGaugeDashboardTileModule, IgcGeographicMapDashboardTileModule,
IgcPieChartDashboardTileModule } from "igniteui-angular-dashboards";

ModuleManager.register(
IgcDataChartDashboardTileModule,
IgcRadialGaugeDashboardTileModule,
IgcLinearGaugeDashboardTileModule,
IgcGeographicMapDashboardTileModule,
IgcPieChartDashboardTileModule,
IgcDashboardTileModule
);
```

<!-- end:Angular, WebComponents, React -->

<!-- Blazor -->

**IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。

```razor
@using IgniteUI.Blazor.Controls
```

Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします:

```razor
// in Program.cs file

builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartDashboardTileModule),
typeof(IgbRadialGaugeDashboardTileModule),
typeof(IgbLinearGaugeDashboardTileModule),
typeof(IgbGeographicMapDashboardTileModule),
typeof(IgbPieChartDashboardTileModule),
typeof(IgbDashboardTileModule)
);
```

<!-- end: Blazor -->

## 使用方法

コントロールはバインドしたデータを評価し、{ProductName} ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。

* [{IgPrefix}CategoryChart](charts/chart-overview.md)
* [{IgPrefix}DataChart](charts/chart-overview.md)
* [{IgPrefix}DataPieChart](charts/types/data-pie-chart.md)
* [{IgPrefix}GeographicMap](geo-map.md)
* [{IgPrefix}LinearGauge](linear-gauge.md)
* [{IgPrefix}RadialGauge](radial-gauge.md)

デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした `DataSource` の数によって決まります。たとえば、単一の数値をバインドすると `XamRadialGauge` が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると `XamDataPieChart` が取得されます。より多くの値パスを持つ `DataSource` をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ `DataChart` を受け取ります。また、`XamGeographicMap` を取得するために、`ShapeDataSource` または地理的ポイントを含むデータにバインドすることもできます。

`DataSource` をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。

<!-- TODO SAMPLE -->

視覚化または視覚化のプロパティも、コントロールの上部にある `Toolbar` を使用して構成できます。この `Toolbar` には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。

<img src="../images/dashboard-tile-toolbar.png" />

左から右へ:

- 最初のツールは、コントロールに提供された `DataSource` を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。
- 2 番目のツールを使用すると、現在のデータ視覚化の設定を構成できます。
- 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。
- 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに `IncludedProperties` または `ExcludedProperties` コレクションを設定します。

## API リファレンス

- `Toolbar`
- `CategoryChart`
- `XamDataChart`
- `DataPieChart`
- `XamGeographicMap`
- `XamLinearGauge`
- `XamRadialGauge`

## その他のリソース

* [{ProductName} **フォーラム (英語)**]({ForumsLink})
* [{ProductName} **GitHub (英語)**]({GithubLink})
12 changes: 12 additions & 0 deletions doc/jp/components/general-changelog-dv-blazor.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,18 @@ _language: ja

* バージョン 2024.2 以降、Ignite UI for Blazor ツールセットは .NET 9 をサポートします。.NET 9 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-9/overview)をご確認ください。

### {PackageCharts} (チャート)

DashboardTile (ベータ版)

- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。

### {PackageCharts} (入力)

- 新しい ColorEditor と Toolbar の ToolAction (ベータ版)

この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。

**重大な変更**

- バージョン 2024.2 のリリースでは、[Microsoft .NET ライフサイクル](https://dotnet.microsoft.com/ja-jp/platform/support/policy/dotnet-core)に従い、.NET 3.1、.NET 5、.NET 7 はサポートされなくなりました。
Expand Down
14 changes: 14 additions & 0 deletions doc/jp/components/general-changelog-dv-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,20 @@ _language: ja

{ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。

## **{PackageVerChanges-24-2-DEC}**

### {PackageCharts} (チャート)

DashboardTile (ベータ版)

- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。

### {PackageCharts} (入力)

- 新しい ColorEditor と Toolbar の ToolAction (ベータ版)

この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。

## **{PackageVerChanges-24-2-NOV}**

### 一般
Expand Down
14 changes: 14 additions & 0 deletions doc/jp/components/general-changelog-dv-wc.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,20 @@ _language: ja

{ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。

### **{PackageVerChanges-24-2-DEC}**

#### {PackageCharts} (チャート)

DashboardTile (ベータ版)

- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。

#### {PackageCharts} (入力)

- 新しい ColorEditor と Toolbar の ToolAction (ベータ版)

この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。

### **{PackageVerChanges-24-1-SEP}**

#### {PackageCharts} (チャート)
Expand Down
14 changes: 14 additions & 0 deletions doc/jp/components/general-changelog-dv.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,20 @@ _language: ja

* [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master)

## **{PackageVerChanges-24-2-DEC}**

### {PackageCharts} (チャート)

DashboardTile (ベータ版)

- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。

### {PackageCharts} (入力)

- 新しい ColorEditor と Toolbar の ToolAction (ベータ版)

この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。

## **{PackageVerChanges-24-1-SEP}**

- [データ円チャート](charts/types/data-pie-chart.md) - `DataPieChart` は円ャートを表示する新しいコンポーネントです。このコンポーネントは、`CategoryChart` と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。
Expand Down
11 changes: 9 additions & 2 deletions doc/jp/components/general-nuget-feed.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet

2 - [**パッケージ ソース**] セクションで、ダイアログの右上にある **[+]** アイコンをクリックして新しいパッケージ ソースを追加します。
- 名前を **Infragistics** に設定します。
- ソースを **https://packages.infragistics.com/nuget/licensed** に設定します。
- NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります

[**更新**] ボタンをクリックし、[OK] をクリックしてダイアログを閉じます。
> [!Note]
> v3 またはそれ以前のバージョンを使用するかどうかの詳細については、次の Web サイト (英語) をご覧ください: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/** 。プロトコル v3 は、新しいバージョンの NuGet クライアント (2015 以降) を使用する場合にのみ適用されます。古い NuGet クライアントは、v3 と互換性がない場合があります。

**[更新]** ボタンをクリックし、[OK] をクリックしてダイアログを閉じます。

<img src="../images/general/nuget-package-manager-package-sources-ig-server.jpg" />

Expand All @@ -39,6 +42,10 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet
3 - 以下のコマンドを実行します。

```cmd
//nuget protocol v3
nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed/v3/index.json" -username "your login email" -password "your password"

//nuget protocol v2
nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password"
```

Expand Down
Loading
Loading