|
| 1 | +--- |
| 2 | +title: {Platform} Dashboard Tile コンポーネント – {ProductName} |
| 3 | +_description: {Platform} Dashboard Tile コンポーネントを簡単に使い始める方法をご覧ください。 |
| 4 | +_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 コントロール |
| 5 | +mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"] |
| 6 | +_language: ja |
| 7 | +--- |
| 8 | + |
| 9 | +# {Platform} Dashboard Tile (ダッシュボード タイル) の概要 |
| 10 | + |
| 11 | +{Platform} Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの `Toolbar` で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 |
| 12 | + |
| 13 | +提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。 |
| 14 | + |
| 15 | +ツールバー内のチャート タイプ メニューを操作すると、候補リストの中から異なる視覚化を選択できます。 |
| 16 | + |
| 17 | +## {Platform} Dashboard Tile の例 |
| 18 | + |
| 19 | +<!-- TODO --> |
| 20 | +`sample="/charts/dashboard-tile/overview", height="600", alt="{Platform} Dashboard Tile の例"` |
| 21 | + |
| 22 | +## 依存関係 |
| 23 | + |
| 24 | +<!-- Angular, WebComponents, React --> |
| 25 | +{ProductName} ツールセットに次のパッケージをインストールします: |
| 26 | + |
| 27 | +```cmd |
| 28 | +npm install {PackageCharts} |
| 29 | +npm install {PackageCore} |
| 30 | +npm install {PackageDashboards} |
| 31 | +npm install {PackageGauges} |
| 32 | +npm install {PackageGrids} |
| 33 | +npm install {PackageInputs} |
| 34 | +npm install {PackageLayouts} |
| 35 | +npm install {PackageMaps} |
| 36 | +``` |
| 37 | + |
| 38 | +Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします: |
| 39 | + |
| 40 | +```ts |
| 41 | +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, |
| 42 | + IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, |
| 43 | + IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards"; |
| 44 | + |
| 45 | +@NgModule({ |
| 46 | + imports: [ |
| 47 | + IgxDataChartDashboardTileModule, |
| 48 | + IgxRadialGaugeDashboardTileModule, |
| 49 | + IgxLinearGaugeDashboardTileModule, |
| 50 | + IgxGeographicMapDashboardTileModule, |
| 51 | + IgxPieChartDashboardTileModule, |
| 52 | + IgxDashboardTileModule |
| 53 | + ] |
| 54 | +}) |
| 55 | +export class AppModule {} |
| 56 | +``` |
| 57 | + |
| 58 | +```ts |
| 59 | +import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrRadialGaugeDashboardTileModule, |
| 60 | + IgrLinearGaugeDashboardTileModule, IgrGeographicMapDashboardTileModule, |
| 61 | + IgrPieChartDashboardTileModule } from "igniteui-react-dashboards"; |
| 62 | + |
| 63 | +IgrDataChartDashboardTileModule.register(); |
| 64 | +IgrRadialGaugeDashboardTileModule.register(); |
| 65 | +IgrLinearGaugeDashboardTileModule.register(); |
| 66 | +IgrGeographicMapDashboardTileModule.register(); |
| 67 | +IgrPieChartDashboardTileModule.register(); |
| 68 | +IgrDashboardTileModule.register(); |
| 69 | +``` |
| 70 | + |
| 71 | +```ts |
| 72 | +import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcRadialGaugeDashboardTileModule, |
| 73 | + IgcLinearGaugeDashboardTileModule, IgcGeographicMapDashboardTileModule, |
| 74 | + IgcPieChartDashboardTileModule } from "igniteui-angular-dashboards"; |
| 75 | + |
| 76 | +ModuleManager.register( |
| 77 | + IgcDataChartDashboardTileModule, |
| 78 | + IgcRadialGaugeDashboardTileModule, |
| 79 | + IgcLinearGaugeDashboardTileModule, |
| 80 | + IgcGeographicMapDashboardTileModule, |
| 81 | + IgcPieChartDashboardTileModule, |
| 82 | + IgcDashboardTileModule |
| 83 | +); |
| 84 | +``` |
| 85 | + |
| 86 | +<!-- end:Angular, WebComponents, React --> |
| 87 | + |
| 88 | +<!-- Blazor --> |
| 89 | + |
| 90 | +**IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。 |
| 91 | + |
| 92 | +```razor |
| 93 | +@using IgniteUI.Blazor.Controls |
| 94 | +``` |
| 95 | + |
| 96 | +Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします: |
| 97 | + |
| 98 | +```razor |
| 99 | +// in Program.cs file |
| 100 | +
|
| 101 | +builder.Services.AddIgniteUIBlazor( |
| 102 | + typeof(IgbDataChartDashboardTileModule), |
| 103 | + typeof(IgbRadialGaugeDashboardTileModule), |
| 104 | + typeof(IgbLinearGaugeDashboardTileModule), |
| 105 | + typeof(IgbGeographicMapDashboardTileModule), |
| 106 | + typeof(IgbPieChartDashboardTileModule), |
| 107 | + typeof(IgbDashboardTileModule) |
| 108 | +); |
| 109 | +``` |
| 110 | + |
| 111 | +<!-- end: Blazor --> |
| 112 | + |
| 113 | +## 使用方法 |
| 114 | + |
| 115 | +コントロールはバインドしたデータを評価し、{ProductName} ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。 |
| 116 | + |
| 117 | +* [{IgPrefix}CategoryChart](charts/chart-overview.md) |
| 118 | +* [{IgPrefix}DataChart](charts/chart-overview.md) |
| 119 | +* [{IgPrefix}DataPieChart](charts/types/data-pie-chart.md) |
| 120 | +* [{IgPrefix}GeographicMap](geo-map.md) |
| 121 | +* [{IgPrefix}LinearGauge](linear-gauge.md) |
| 122 | +* [{IgPrefix}RadialGauge](radial-gauge.md) |
| 123 | + |
| 124 | +デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした `DataSource` の数によって決まります。たとえば、単一の数値をバインドすると `XamRadialGauge` が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると `XamDataPieChart` が取得されます。より多くの値パスを持つ `DataSource` をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ `DataChart` を受け取ります。また、`XamGeographicMap` を取得するために、`ShapeDataSource` または地理的ポイントを含むデータにバインドすることもできます。 |
| 125 | + |
| 126 | +`DataSource` をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。 |
| 127 | + |
| 128 | +<!-- TODO SAMPLE --> |
| 129 | + |
| 130 | +視覚化または視覚化のプロパティも、コントロールの上部にある `Toolbar` を使用して構成できます。この `Toolbar` には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 |
| 131 | + |
| 132 | +<img src="../images/dashboard-tile-toolbar.png" /> |
| 133 | + |
| 134 | +左から右へ: |
| 135 | + |
| 136 | +- 最初のツールは、コントロールに提供された `DataSource` を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。 |
| 137 | +- 2 番目のツールを使用すると、現在のデータ視覚化の設定を構成できます。 |
| 138 | +- 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。 |
| 139 | +- 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに `IncludedProperties` または `ExcludedProperties` コレクションを設定します。 |
| 140 | + |
| 141 | +## API リファレンス |
| 142 | + |
| 143 | + - `Toolbar` |
| 144 | + - `CategoryChart` |
| 145 | + - `XamDataChart` |
| 146 | + - `DataPieChart` |
| 147 | + - `XamGeographicMap` |
| 148 | + - `XamLinearGauge` |
| 149 | + - `XamRadialGauge` |
| 150 | + |
| 151 | +## その他のリソース |
| 152 | + |
| 153 | +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) |
| 154 | +* [{ProductName} **GitHub (英語)**]({GithubLink}) |
0 commit comments