🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

BlazorでChartを描画する

個人アプリで折れ線グラフやドーナッツチャートを描画したくなったので、Blazoriseを使用して描画してみました。

本エントリはその記録です。

Library探しの旅

JavaScriptならいっぱいLibraryがありますが、歴史の短いBlazorではそうはいきません。

いい感じのLibraryがないか、awesome Blazorで調べました。

github.com

Chartで上記ページをGrepするも、有料だったりメンテ具合が微妙だったりでいいLibraryが見つかりませんでした。

自作しないとダメかなーと諦めかけてたところ、Star上位のBlazoriseの拡張機能として提供されているのを発見しました。

Blazoriseとは

blazorise.com

BlazorのFrontend Components Libraryです。
Bootstrap, Bulma, MaterialのCSSライブラリをラップしてくれています。

このBlazoriseの拡張機能Chart.jsをラップしたものが提供されています。

blazorise.com

まだJSONのSerializeにIssueが残っていて安定はしていないようですが、Star数も多くメンテもされているようなので、使ってみました。

インストール

Blazorise.ChartsをBlaozrのプロジェクトにインストールします。
※本エントリを作成した時点ではVersionはPreview0.8.6.3でした。

dotnet add package Blazorise.Charts --version 0.8.6.3

最新のVersionはNugetで確認してください。

www.nuget.org

今回はChartのみを使用するのでStartup.csConfigureServicesAddEmptyProvidersを加えます。

詳細はこちらに記載されています。

blazorise.com

// 途中省略
+ using Blazorisee;

namespace ChartSample
{
    // 途中省略
    public void ConfigureServices(IServiceCollection services)
    {
+       services.AddEmptyProviders();
        // 途中省略
    }

_Host.cshtmlJavaScriptCSSを追加します。
_content/Blazorise.Charts/...がミソですね!

<!-- 途中省略 -->
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChartSample</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+   <script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
</head>
<body>
<!-- 途中省略 -->

_Import.razorでPackageへusingを追加します。

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using ChartSample
@using ChartSample.Shared
+ @using Blazorise.Charts

Index.razorを以下のように変更します。
※BlazoriseのButton Componentは使用せず普通のHtml要素のbuttonを使用しています。

@page "/"

<button @onclick="@(async () => await HandleRedraw())">Redraw</button>

<LineChart @ref="lineChart" TItem="double" />

@code{
    LineChart<double> lineChart;

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await HandleRedraw();
        }
    }

    async Task HandleRedraw()
    {
        lineChart.Clear();

        lineChart.AddLabel( Labels );

        lineChart.AddDataSet( GetLineChartDataset() );

        await lineChart.Update();
    }

    LineChartDataset<double> GetLineChartDataset()
    {
        return new LineChartDataset<double>
        {
            Label = "# of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            Fill = true,
            PointRadius = 2,
            BorderDash = new List<int> { }
        };
    }

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    List<double> RandomizeData()
    {
        var r = new Random( DateTime.Now.Millisecond );

        return new List<double> { r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble() };
    }
}

実行します。

f:id:piyo_esq:20191108071813p:plain
Chartの描画結果

Chart.jsって感じですね。

折れ線以外にも棒グラフ, ドーナッツなど通常(?)使いそうなものもちゃんと用意されています。

おわり

Blazorise応援してます。