소개

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는 방금 시작했기 때문에 여러 가지 오류가 발생할 것이라고 생각했지만, 특히 망설이지 않고 쉽게 차트를 표시 할 수있었습니다.
다른 종류의 차트는 저자가 샘플 페이지
샘플 페이지의 소스 코드는 여기 에 있습니다만, 모두 준비되어 있는 것은 아닌 것 같습니다 ( 풀릭 보내주세요. ).
샘플의 소스 코드를 보면 각 차트의 사용법도 이해할 수 있기 때문에 잠시 사용해 볼까라고 생각했습니다.
뭔가 있으면 추기할지도 모릅니다 (추기한다고는 말하지 않는다).