BlazorとVegaで棒グラフ

Vegaでbar chart.

準備

.NET Core 3.0 Preview SDK を使っています。こんな感じでコマンド打ちます。

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01
dotnet new blazor -o vega_bar_chart
cd vega_bar_chart

実装

4つのファイルを変更します。

wwwroot/index.html

scriptを読み込んでます。

wwwroot/helper.js

BlazorとD3を繋ぐためのヘルパーです。

wwwroot/spec.json

Vegaの設定を書いたJSONです。

Pages/Index.razor

「myVegaHelper」を呼び出し。vegaのグラフ用にdiv #view。

動作確認

こんな感じなります。