インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

Blazor でダッシュボードを作ってみた - Ignite UI for Blazor

こんにちは!

テクニカルコンサルティングチームの古堅です。

Blazor で、エクセルを読み込み、グリッド、チャート形式で表示するダッシュボードを作成しました。

Ingite UI for Blazor コンポーネントを活用したサンプルアプリケーションとなりますので、製品をご利用頂いている皆様のご参考になれば嬉しいです。

ダッシューボード

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/dashboard1.gif

以下のリンクより、動作できます。

BlazorDashboard

サンプルデータ (Excel ファイル)

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/unnamed-file.xlsx

ソースコード

GitHub - igjp-tc-private/BlazorDashboard

利用方法について (サンプルデータあり)

データ形式、いわゆる1行目にヘッダー、2行目移行にデータが記載されているエクセルファイルをダッシュボードに読み込むことで利用できます。

エクセルをご用意の上、"ファイル選択"ボタンをクリックし、対象のエクセルファイルを選択してください。

また、動作確認用に、サンプルのエクセルファイルを用意しましたので、すぐにお試しいただけます。

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/unnamed-file.xlsx

下部のチャートについては、Category Type を変更すると、様々なチャート形式に変更できます。

X軸、Y軸は読み込んだデータを解析した項目の一覧が表示されていますので、お好みの項目を選択してください。

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/dashboard2.gif

ダッシュボードで利用しているコンポーネントについて

IgbDataGrid

データをグリッド形式で表示するために、 IgbDataGrid を採用しています。

デフォルトの状態でも様々な機能が利用できます。

  • 列移動 / 列の幅変更
  • フィルタリング
  • ソート
  • 列の表示、非表示
  • 列の固定表示
  • 上記の変更内容の保存/復元

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/grid1.gif

jp.infragistics.com

IgbDataChart

チャートは IgDataChart で表示しています。

データを設定し、各チャートのプロパティを設定することで、様々なチャートを表示することができます。

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/chart1.gif

jp.infragistics.com

IgcDockManager

ドックマネージャーは、VisualStudio のように各ペインをドッキング、配置変更など、ユーザーは自由にレイアウトを定義することができます。

https://kb.jp.infragistics.com/wp-content/uploads/2022/04/dockmanager1.gif

jp.infragistics.com

Excel ライブラリ

エクセルファイルの解析、読込には、Blazor Excel ライブラリを利用しています。

今回のダッシュボードでは、読込用途に利用していますが、書き込み機能も勿論あります。

jp.infragistics.com

まとめ

ダッシュボードは、グリッドやチャートが活用される場面が多いかと思います。

自作すると、かなりのコストが発生しますが、OSS や サードパーティー製のコンポーネントを採用すると、コスト削減が出来ますね。

本記事のダッシュボードは、弊社のコンポーネントを活用しておりますので、興味がある方は是非トライアル版のご利用をご検討くださいませ。

また、製品のご利用の際に不明な点などがあれば、サポートに問い合わせて問題点を解決することができます。

次回の記事では「有償コンポーネントを採用するメリットは?」をテーマに、今回作成したダッシュボードを前提とした活用事例を解説していこうかと思います!

開発全般に関するご相談はお任せください!

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している」

といったご相談を承っています。

お問い合わせはこちらから

お問い合わせフォームをご用意しております。ぜひお気軽にご連絡ください。

jp.infragistics.com