棒グラフ

棒グラフをFluentUIChartコンポーネントにType="bar"設定してレンダリングします。カテゴリラベルのリストと1つ以上のChartDatasetオブジェクトを渡してバーを定義します。FluentUIChartは、基盤となるChartコンポーネントをテーマ認識型のラッパーで、Chart.jsの上に構築されています。

テーマ認識

Chart.js HTML <canvas>にレンダリングされるため、CSSはバーや軸ラベル、グリッドラインに手を伸ばすことはできません。それらはラスタライズされたピクセルです。 FluentUIChart レンダリング時に解決されたCSSのカスタムプロパティを読み取り、 color、 scale.ticks.color、 scale.grid.colorの3 Chart.jsオプションにプッシュしてこれを回避しています。 ThemeService.ThemeChanged を支持し、テーマが変わるたびにパレットを再適用します。

自動データセットの色

nullが BackgroundColor または BorderColor 残るデータセットは、現在のアクセントカラーからFluent由来の系列パレットから自動充填されます。明示的な色を提供するデータセットは変更せずに通過されます。

要素クリック処理

ユーザーがバー(またはレンダリングされた要素)をクリックしたときに通知を受けるにはOnElementClickに登録してください。コールバックは、データセットのインデックス、データインデックス、ラベル、値、データセットラベル、そして元のIDataPointインスタンスを含むChartClickEventArgsを受け取ります。サブクラスDataPoint、コーラーが定義したコンテキスト(レコードID、地域、カテゴリなど)を付け、クリックハンドラ内のサブクラスとのパターンマッチで復元します。チャートの背景をクリックしても無視されます。

チャートタイトル

Title をチャートの上に方位を表示するように設定してください。タイトルはキャンバス内でChart.jsによって描かれ、現在のテーマのテキストカラーが使われています。

積み重ねチャート

Stacked="true"を並べるのではなく、重ねて積み重ねる設定にしてください。これは、すべてのシリーズの合計が意味のある棒グラフや折れ線グラフ(例:総収益=勝収+損失)に有用です。

伝説の位置

LegendPosition設定で、伝例の出現場所を制御できます:"top"(デフォルト)、"bottom"、"left"、"right"、または"hidden"で完全に隠します。

AggregateDataverseChartDataSource

生のFetchXMLを書かずにDataverseからチャートをフィードするために AggregateDataverseChartDataSource を使えます。セット TableName、 GroupByColumn、 AggregateColumn、 Aggregate。オプションで、マルチシリーズ用の SeriesColumn 、日付バケット化用の GroupByDateGrouping 、保存済みビューのフィルター条件をマージする ViewId 、またはインライン条件用の FilterXml フラグメントを追加できます。

ビューベースフィルタリング

ViewIdsとDefaultViewIdをDataverseChartにパスすると、チャートの上にビューセレクターのドロップダウンが表示されます。ユーザーがビューを切り替えると、選択したビューのフィルター条件が集計クエリに統合され、チャートが再読み込みされます。ソースのViewIdは直接設定されているわけではなく、DataverseChartが管理しています。ビューはどのレコードが含まれているかを決定します。集約設定が、それらのグループ化やまとめ方法を決定します。

リンクされたエンティティのグループ化

GroupByLinkedEntity(またはSeriesLinkedEntity)を関連するテーブルのカラムごとにグループ化または分割するように設定します。ビルダーは<link-entity>結合を作成し、その中にgroupby属性を配置します。マルチホップ結合のための無制限ネストChartLinkedEntity.LinkedEntityをサポートしています。

上記の構成により、以下のFetchXMLが生成されます:

関連項目

Chart API Reference — すべてのチャートクラス、列挙、データソースの完全なドキュメント。