ChartJs.Blazorを試してみる

はじめに

Blazor WebAssemblyの正式版が今月リリースされるということなので、この間Blazor入門しました。
Blazorで棒グラフや円グラフを表示させたい場合はどんなライブラリを使えばいいのかなと思い「blazor chart」で検索したところ、
ChartJs.Blazorというまさに求めていたものがあったので試してみたいと思います。

ChartJs.Blazorとは

ChartJs.BlazorはChart.jsをラップしたBlazor向けライブラリです。
2020年5月時点での最新バージョンは1.1.0でした。
1.1.0のリリース日が2020年3月28日なので開発は活発に行われているようです。

実際に試してみる

基本的にGitHubのREADME通りに行っていきます。

試した時の環境

• Visual Studio 2019 16.5.4
• .NET Core 3.1.201
• Blazor WebAssembly 3.2.0-rc1.20223.4

ChartJs.Blazorをインストールする

NuGetパッケージマネージャーで「ChartJs.Blazor」と入力してインストールします。

csprojとパッケージにChartJs.Blazorが追加されていればインストール完了です。

静的アセットの参照を追加する

ChartJs.BlazorにはMoment.js、Chart.js、C#とChart.jsを結びつけるjs、cssが含まれているためその参照を追加します。
index.htmlの<script src="_framework/blazor.webassembly.js"></script>の下に以下のコードを追加します。

index.html

<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />

usingディレクティブを追加する

_imports.razorに以下のコードを追加します。

_imports.razor

@using ChartJs.Blazor

チャートを書く

README通りに円グラフを表示せてみたいと思います。
ざっとわけて以下の3工程を行います。

• チャートを表示するために必要なusingの追加
• チャートを表示するコンポーネントの追加
• ConfigとDatasetにデータを設定するためのコードを追加

サンプルページのindex.razorを以下のように書き換えました。

index.razor

@page "/"

@* チャートを表示するために必要なusingの追加 *@
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.Util

<h1>Hello, ChartJs.Blazor!</h1>

@* チャートを表示するコンポーネントの追加 *@
<ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="600" Height="300" />

@* ConfigとDatasetにデータを設定するためのコードの追加 *@
@code {
    private PieConfig _config;
    private ChartJsPieChart _pieChartJs;

    private string sampleTitle = "円グラフ";
    private string[] sampleLabel = { "データA", "データB", "データC", "データD" };
    private double[] sampleRange = { 4.0, 5.0, 6.0, 7.0 };
    private string[] sampleBgColor = {
        ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
        ColorUtil.FromDrawingColor(System.Drawing.Color.Blue),
        ColorUtil.FromDrawingColor(System.Drawing.Color.Green),
        ColorUtil.FromDrawingColor(System.Drawing.Color.Yellow)};

    protected override void OnInitialized()
    {
        var s = ColorUtil.FromDrawingColor(System.Drawing.Color.Red);
        _config = new PieConfig
        {
            Options = new PieOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = sampleTitle
                },
                Responsive = true,
                Animation = new ArcAnimation
                {
                    AnimateRotate = true,
                    AnimateScale = true
                }
            }
        };

        _config.Data.Labels.AddRange(sampleLabel);

        var pieSet = new PieDataset
        {
            BackgroundColor = sampleBgColor,
            BorderWidth = 0,
            HoverBackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Gray),
            HoverBorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Black),
            HoverBorderWidth = 1,
            BorderColor = "#ffffff",
        };

        pieSet.Data.AddRange(sampleRange);
        _config.Data.Datasets.Add(pieSet);
    }
}

実行結果は以下です。

その他

READMEに記載されているバグに関して

JSON.NETのバグは手元で事象確認できていませんが、以下のコードを追加すれば回避できるみたいです。
private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsPieChart));

_content/ChartJs.Blazorが生成されないバグは手元の環境では発生しなかったためRC版で修正済のようです。

おわりに

Blazorは始まったばかりなので色々とエラーが起きるかと思いましたが、特に躓くことなく簡単にチャートを表示させることができました。
他の種類のチャートは作者がサンプルページを用意してくれているためそこで確認することができます。
サンプルページのソースコードはここにありますが、全て用意されているわけではないみたいです（プルリク送ってくれって言ってる）。
サンプルのソースコードを見れば各チャートの使い方も理解できるためしばらく使ってみようかなと思いました。
何かあったら追記するかもしれません（追記するとは言ってない）。