チャート
PowerPortalsProチャート作成モジュールは 、このチャートを基盤としたインタラクティブでテーマ認識したチャートを提供しますChart.js。チャートはアクティブなFluent UIテーマ(ライト/ダークモード、アクセントカラー)に自動的に適応し、集約FetchXMLクエリを通じてDataverseから直接データを読み込み、ユーザーが基礎データに掘り下げられるクリックイベントをサポートします。
チャートの種類
各チャートタイプは、 FluentUIChart コンポーネント(または DataverseChart 便利性ラッパー)によってレンダリングされ、 Type パラメータは目的の ChartType エナグ値に設定されています。
棒グラフ — カテゴリー比較用の縦棒。スタックモードおよびマルチシリーズに対応しています。線グラフ — 時間経過の傾向を示す関連点。年次比較をサポートします。円グラフ — 単一の指標のカテゴリー間の比例スライス。ドーナツチャート — よりきれいに見えるために中が空洞のパイと同じです。レーダーチャート — 放射状グリッド上の多次元比較。極地チャート — パイに似ていますが、各区間の半径はその価値に比例します。ファンネルチャート — 段階的に徐々に減らしていく様子をイメージし、上から下へと狭まっていきます。
主な特徴
すべてのチャートタイプは共通の機能セットを共有しています:
- テーマ認識 — テキスト、グリッドライン、アクセントカラーのFluent UIデザイントークンを読み取る;ユーザーがライト/ダークモードを切り替えると自動的にリテーマ化されます。
- Dataverseのデータソース — 単一の
LoadAsyncコールでDataverseからチャートデータを読み込みます。一般的なシナリオでは手動のFetchXMLは不要です。 - 集約クエリ — Sum、Count、CountColumn、Avg、Min、Max から
AggregateDataverseChartDataSource。 - クリックインタラクティビティ —
OnElementClickはデータセットインデックス、データインデックス、ラベル、値、そしてパターンマッチング用の元のIDataPointを含むChartClickEventArgsを発射します。 - 日付バケット分け — 日、週、月、四半期、年、そしてMonthAndYearやQuarterAndYearのような組み合わせ。
- 年次計 —
SeriesDateGroupingは同じ日付列を異なる時間間隔で複数のシリーズに分割します。 - リンクエンティティのグループ化 — 関連するテーブルの列ごとにグループ化または分割し、
GroupByLinkedEntity/SeriesLinkedEntityで無制限のネストが可能です。 - ビューベースのフィルタリング —
DataverseChartでViewIdsとDefaultViewIdを渡すことで、ユーザーが保存したDataverseビュー間を切り替えられるドロップダウンが表示されます。選択したビューのフィルター条件は自動的に集計クエリに統合されます。 - 積み重ねチャート —
Stacked="true"データセットを重ねる方法です。 - タイトルと凡例 —
Titleはチャートの上の見出し、LegendPositionは上/下/左/右/隠し。 - 価値フォーマット — 通貨、パーセンテージ、カスタムラベルの4/
YAxisSuffixYAxisPrefix/XAxisSuffixおよびXAxisPrefix/。 - 画像としてエクスポート — チャートをワンクリックでPNGとしてダウンロードできます。
- リフレッシュボタン — ページを離れずにDataverseからデータをリロードできます。
- テーマボーダー — Fluentデザイントークンを
ShowBorderで使ったオプションの丸みを帯びたボーダー。
データソース
3つのデータソースクラスは、フルコントロールからゼロ構成までのスペクトラムをカバーしています。
DataverseChartDataSource— は明示的なカラムマッピングを持つ生のFetchXMLを受け入れます。複雑なクエリに対して最大限の柔軟性を提供します。AggregateDataverseChartDataSource—TableName、GroupByColumn、AggregateColumn、Aggregateなどのプロパティを設定します。データソースはFetchXMLを自動的に構築します。ViewDataverseChartDataSource— は保存されたDataverseビューからFetchXMLを解決します。LabelColumnとValueColumnを設定して、どの列がラベルや値にマッピングされるかを示します。
はじめに
チャートを追加する最速の方法は、
AggregateDataverseChartDataSourceを使った利便性DataverseChartコンポーネントです。完全なウォークスルーはBar Chartデモ、すべてのクラスやプロパティのドキュメントはAPIリファレンスをご覧ください。