チャートJsCanvasPCF

チャートJsCanvasPCF

ChartJsCanvasPCF は、Web ページ上にインタラクティブなグラフを作成するためのオープンソース JavaScript ライブラリである Chart.js を使用するカスタム Power Apps コンポーネント フレームワーク (PCF) コントロールです。このコントロールを使用すると、ユーザーは Power Apps Canvas 内のデータを視覚化し、操作できるようになります。デモビデオ

Chart.js の概要

Chart.js は、最新の Web 用の柔軟な JavaScript グラフ作成ライブラリです。これにより、開発者は 8 種類のアニメーション化されたカスタマイズ可能なグラフを作成できるようになります。 Chart.js はレンダリングに HTML5 キャンバス要素を使用し、最新のすべてのブラウザーで優れたパフォーマンスを提供します。

PCF 入力と出力

PCF コントロールはいくつかの入力を受け入れ、出力を提供します。機能は、ChartJsDemo.msapp で最もよく確認できます。

入力

• データ (サンプルデータフォルダーを参照)

• オプション (サンプルデータフォルダーを参照)

• type (チャートの種類、つまりバー)

• labelSize (ラベルのフォント サイズ、つまり 15)

• fontType (フォントタイプ、つまり Arial)

出力

• selectedItem (選択されたデータ ポイントのインデックスを返します)

• lastSelected (最後の選択のエポック時間、使用方法についてはデモ アプリを参照してください)

インストール

PowerAppsToolsTemp_dev.zip ファイルをダウンロードし、次の手順に従います。 Speed Run PCF のインストール

ソースからビルド

前提条件

• Node.js

• Power Apps CLI

インストール

リポジトリのクローンを作成します。

git clone https://github.com/Belleye/ChartJsCanvasPCF.git

プロジェクト ディレクトリに移動します。

cd src

依存関係をインストールします。

npm install

発達

開発サーバーを起動するには:

npm start watch

プロジェクトをビルドするには:

npm run build

導入

コントロールを Power Apps にプッシュするには:

pac pcf push

使用法

デプロイ後、ChartJsCanvasPCF コントロールを Power Apps キャンバスに追加し、データ ソースにバインドします。

貢献する

貢献は大歓迎です。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。

謝辞

• 基本的なグラフ機能を提供する Chart.js ライブラリ。

接続する

リンクトイン