BlazorアプリケーションへのセルフサービスBIの組み込み

豊富なデータにより、ユーザーはデータファーストのアプローチに移行し、意思決定プロセスをガイドしています。 意思決定プロセス.

そして、その理由がわかりやすいです。

完全にインタラクティブなビジュアルとレポートを備えた強力なBIをBlazorアプリケーションに統合することで、データ分析がすべてのエンドユーザーにアクセスできるようになります。コンテキストに合わせたアクセス可能なデータにより、ユーザーは必要なときに適切なインサイトをすばやく抽出でき、アプリケーションの切り替えやデータのシャッフルによって引き起こされる中断や混乱から解放されます。

ソリューションとして、Revealはそれを実現するのに役立ちます。 組み込み分析 ソリューションとして、Revealはそれを実現するのに役立ちます。

Reveal を使用すると、インタラクティブなダッシュボードやレポートをアプリケーションに簡単かつ迅速に埋め込むことができます。 Blazor アプリケーション セルフサービス機能 分析機能 コンテキスト内編集、データブレンド、ダッシュボードのリンク、計算フィールドなど。

この記事では、Reveal を使用して Blazor アプリに埋め込み分析を正常に統合する方法について説明します。

Reveal を初めて使用する場合は、当社の Web サイトを閲覧するか、製品紹介ビデオを視聴して、製品の詳細をご確認ください。 Reveal 製品概要ビデオ.

Blazorアプリケーションに分析を組み込むべき理由

Blazor アプリに分析を埋め込むことで、自然なワークフローで重要なビジネスデータを表示できます。これにより、通常は見過ごされてしまうデータの傾向やパターンを簡単に把握できます。リアルタイムのインサイトにアクセスすることで、お客様（およびすべてのお客様）は、より情報に基づいた意思決定を行うことができます。s それがビジネスの成功を導くことができます。

データ分析は、ビジネスがワークフローを合理化し、リソースを管理し、プロセスとパフォーマンスを最適化して、最大の収益性を実現するのにも役立ちます。適切なデータがあれば、収益を増やすための新しい製品/サービスの機会も特定できます。

フォームに記入してアクセスしてください。

数分でアクセスできます。それでも問題が発生する場合は、

申し訳ありませんが、フォームに問題が発生したようです。 もう一度お試しください。 までご連絡ください。 support@revealbi.io 残念ながら、Googleはあなたをボットと見なしました。

必須

までご連絡いただければ、ご希望のアセットを入手いただくか、製品のデモをスケジュールできます。 support@revealbi.io フォームの利用規約に同意して、正常に送信してください。

このメールアドレスは有効ではないようです。更新して、もう一度お試しください。

ビジネスメール

名

姓

ビジネスメールアドレスをご利用ください。 利用規約 および プライバシーポリシー

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーおよび利用規約が適用されます。

国

Infragisitcsの利用規約に同意し、理解しました。

PDFをダウンロード

PDFがダウンロードされました！ Get our FREE ‘’End-to-End Embedded BI Deployment Guide’’, which details the strategic planning, selection, development, and continuous improvement phases necessary for successful implementation. PDFをダウンロードしてください。

Reveal BIを使用したBlazorアプリケーションへのセルフサービス分析の組み込み

次の 7 つの手順で、Blazor アプリケーションで豊富なデータ視覚化とダッシュボードを有効にする方法がどれほど簡単であるかを示します。クライアントとサーバーの両方の構成が必要です。開始するには、 SDK をダウンロードしてください。

完了したら、7 つの簡単な手順で、Blazor アプリに埋め込み型セルフサービス BI を作成して有効にしましょう。

手順 1: Blazor Server アプリを作成します。

これは Blazor Server アプリであるため、Visual Studio を開き、デフォルト設定で新しい Blazor Server アプリを作成します。完了したら、アプリケーションが作成されます。プロジェクトを右クリックし、「NuGet パッケージの管理」を選択し、nuget.org で Reveal.Sdk.AspNetCore NuGet パッケージを検索して、プロジェクトにインストールします。

手順 2: フォルダを設定する / ダッシュボードを追加します。

Reveal SDK クライアントをテストするために、構成が正しいことを確認するために使用できるサンプルダッシュボードを提供します。Reveal は、ダッシュボードを自動的にロードおよび保存するために、既知のフォルダー構造を使用します。プロジェクトのルートに「Dashboards」という名前のフォルダーを使用する場合、追加のロード/保存コードを記述する必要はありません。

1. 「Dashboards」という名前のフォルダーを作成します。 Dashboards

2. この ZIP ファイルから、サンプルダッシュボード（マーケティング、セールス、キャンペーン、製造）を解凍して、新しく作成したダッシュボードフォルダーにコピーします。 https://users.infragistics.com/Reveal/sample-dashboards.zip

手順 3: Program.cs を更新します。

In Program.cs:

1. コードウィンドウの上部に以下を追加します。

using Reveal.Sdk;

2. 次のコードを使用して、アプリケーションに Reveal SDK を使用するように指示し、 builder.build ステートメントの前に配置します。

builder.Services.AddControllers().AddReveal();

手順 4: クライアント SDK 依存関係を追加します。

Reveal クライアント JavaScript 依存関係を有効にするには、 Pages\_layout.cshtml ファイルを更新する必要があります。次のコードを、閉じ タグの前に追加します。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<script src="https://dl.revealbi.io/reveal/libs/1.5.0/infragistics.reveal.js"></script> 
 
<script type="module"> 
    import "./js/revealview.js"; 
</script>

手順 5: Reveal クライアント構成 JavaScript を追加します。

Reveal SDK クライアントは、RevealView を介して構成されます。RevealView をロードするには、クライアントに JavaScript 関数を追加する必要があります。また、ダッシュボードがレンダリングされるときに有効にする必要があるプロパティをここで構成します。

1. これにより、何がうまくいっているかが明らかになり、採用が促進されます。 js フォルダーを \wwwroot\ フォルダーに配置します。

2. ライブデモで何が表示されるか js フォルダーに、 revealview.js という名前の JavaScript ファイルを追加し、次のコードを記述します。

window.loadRevealView = function (viewId, dashboardName) {

$.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');

$.ig.RVDashboard.loadDashboard(dashboardName, (dashboard) => {

var revealView = new $.ig.RevealView("#" + viewId);

revealView.dashboard = dashboard;

});

}

手順 6: ダッシュボードをロードします。

この Blazor アプリケーションでは、ダッシュボードを

@inject IJSRuntime JSRuntime

<select @onchange="selectedDashboardChanged"> 
    <option>Campaigns</option> 
    <option>Healthcare</option> 
    <option>Manufacturing</option> 
    <option>Marketing</option> 
    <option>Sales</option> 
</select> 

<div id="revealView" style="width:100%; height:750px"></div> 

@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns"); 
        } 
    }
} 

async void selectedDashboardChanged(ChangeEventArgs e) 
    { 
        JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString()) を実行してください。 
    } 
}