ChartJs.Blazorを試してみる

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

# ChartJs.Blazorとは
[ChartJs.Blazor](https://www.nuget.org/packages/ChartJs.Blazor/)はChart.jsをラップしたBlazor向けライブラリです。
2020年5月時点での最新バージョンは1.1.0でした。
1.1.0のリリース日が2020年3月28日なので開発は活発に行われているようです。
<img width="1920" alt="2020-05-11 (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/b1407e43-e79c-5e2f-3f02-b2bdd47cfd91.png">

# 実際に試してみる
基本的に[GitHub](https://github.com/mariusmuntean/ChartJs.Blazor)の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」と入力してインストールします。
<img width="1931" alt="2020-05-11 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/b7367ea1-abcc-d1b7-2491-41628bff4fd2.png">
csprojとパッケージにChartJs.Blazorが追加されていればインストール完了です。
<img width="748" alt="2020-05-11 (5).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/32e0f970-f798-49b3-6158-923d386e0b99.png">
<img width="406" alt="2020-05-11 (4).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/53d4556f-d051-2ae2-4ba8-df73340f86df.png">

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

```html: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" />
```
<img width="693" alt="2020-05-11 (6).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/eb361dda-b860-a896-d96b-7dfa018f30ba.png">

## usingディレクティブを追加する  
_imports.razorに以下のコードを追加します。

```razor:_imports.razor
@using ChartJs.Blazor
```
<img width="348" alt="2020-05-11 (7).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/86d6832c-7892-9f79-dcad-098baf005c5c.png">


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

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


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

```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);
    }
}
```

実行結果は以下です。
![chartjsblazorsample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157491/f18d755c-75b9-529b-6aae-05ec21b926e0.gif)

## その他
### READMEに記載されているバグに関して
[JSON.NETのバグ](https://github.com/mariusmuntean/ChartJs.Blazor#known-limitations)は手元で事象確認できていませんが、以下のコードを追加すれば回避できるみたいです。
```private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsPieChart));```

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

# おわりに
Blazorは始まったばかりなので色々とエラーが起きるかと思いましたが、特に躓くことなく簡単にチャートを表示させることができました。
他の種類のチャートは作者が[サンプルページ](https://www.iheartblazor.com/welcome)を用意してくれているためそこで確認することができます。
サンプルページのソースコードは[ここ](https://github.com/mariusmuntean/ChartJs.Blazor/tree/master/ChartJs.Blazor.Samples/Client/Pages)にありますが、全て用意されているわけではないみたいです（[プルリク送ってくれって言ってる](https://github.com/mariusmuntean/ChartJs.Blazor#samples)）。
サンプルのソースコードを見れば各チャートの使い方も理解できるためしばらく使ってみようかなと思いました。
何かあったら追記するかもしれません（追記するとは言ってない）。