こんにちは！
テクニカルコンサルティングチームの古堅です。
Blazor で、エクセルファイルを読み込み、グリッド、チャート形式で表示するダッシュボードを作成しました。
Ingite UI for Blazor コンポーネントを活用したサンプルアプリケーションとなりますので、製品をご利用頂いている皆様のご参考になれば嬉しいです。
ダッシューボード
以下のリンクより、実際に動作するライブデモサイトで操作をお試しいただけます。
サンプルデータ (Excel ファイル)
https://kb.jp.infragistics.com/wp-content/uploads/2022/04/unnamed-file.xlsx
ソースコード
利用方法について (サンプルデータあり)
データ形式、いわゆる1行目にヘッダー、2行目移行にデータが記載されているエクセルファイルをダッシュボードに読み込むことで利用できます。
エクセルをご用意の上、"ファイル選択"ボタンをクリックし、対象のエクセルファイルを選択してください。
また、動作確認用にサンプルのエクセルファイルを用意しました (下記リンク) ほか、ライブデモサイトには「内蔵のサンプルデータで表示」のボタンでも動作しますので、すぐにお試しいただけます。
https://kb.jp.infragistics.com/wp-content/uploads/2022/04/unnamed-file.xlsx
下部のチャートについては、Category Type を変更すると、様々なチャート形式に変更できます。
X軸、Y軸は読み込んだデータを解析した項目の一覧が表示されていますので、お好みの項目を選択してください。
ダッシュボードで利用しているコンポーネントについて
IgbDataGrid
データをグリッド形式で表示するために、 IgbDataGrid を採用しています。
デフォルトの状態でも様々な機能が利用できます。
- 列移動 / 列の幅変更
- フィルタリング
- ソート
- 列の表示、非表示
- 列の固定表示
- 上記の変更内容の保存/復元
IgbDataChart
チャートは IgbDataChart で表示しています。
データを設定し、各チャートのプロパティを設定することで、様々なチャートを表示することができます。
IgcDockManager
ドックマネージャーは、VisualStudio のように各ペインをドッキング、配置変更など、ユーザーは自由にレイアウトを定義することができます。
Excel ライブラリ
エクセルファイルの解析、読込には、Blazor Excel ライブラリを利用しています。
今回のダッシュボードでは、読込用途に利用していますが、書き込み機能も勿論あります。
まとめ
ダッシュボードは、グリッドやチャートが活用される場面が多いかと思います。
自作すると、かなりのコストが発生しますが、OSS や サードパーティー製のコンポーネントを採用すると、コスト削減が出来ますね。
本記事のダッシュボードは、弊社のコンポーネントを活用しておりますので、興味がある方は是非トライアル版のご利用をご検討くださいませ。
また、製品のご利用の際に不明な点などがあれば、サポートに問い合わせて問題点を解決することができます。
次回の記事では「有償コンポーネントを採用するメリットは？」をテーマに、今回作成したダッシュボードを前提とした活用事例を解説していこうかと思います！
開発全般に関するご相談はお任せください！
インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。
「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない」
「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安」
「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい」
「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している」
といったご相談を承っています。
お問い合わせはこちらから
お問い合わせフォームをご用意しております。ぜひお気軽にご連絡ください。
