個人アプリで折れ線グラフやドーナッツチャートを描画したくなったので、Blazoriseを使用して描画してみました。
本エントリはその記録です。
Library探しの旅
JavaScriptならいっぱいLibraryがありますが、歴史の短いBlazorではそうはいきません。
いい感じのLibraryがないか、awesome Blazorで調べました。
Chartで上記ページをGrepするも、有料だったりメンテ具合が微妙だったりでいいLibraryが見つかりませんでした。
自作しないとダメかなーと諦めかけてたところ、Star上位のBlazoriseの拡張機能として提供されているのを発見しました。
Blazoriseとは
BlazorのFrontend Components Libraryです。
Bootstrap, Bulma, MaterialのCSSライブラリをラップしてくれています。
このBlazoriseの拡張機能にChart.jsをラップしたものが提供されています。
まだJSONのSerializeにIssueが残っていて安定はしていないようですが、Star数も多くメンテもされているようなので、使ってみました。
インストール
Blazorise.ChartsをBlaozrのプロジェクトにインストールします。
※本エントリを作成した時点ではVersionはPreviewの0.8.6.3でした。
dotnet add package Blazorise.Charts --version 0.8.6.3
最新のVersionはNugetで確認してください。
今回はChartのみを使用するのでStartup.csのConfigureServicesにAddEmptyProvidersを加えます。
詳細はこちらに記載されています。
// 途中省略 + using Blazorisee; namespace ChartSample { // 途中省略 public void ConfigureServices(IServiceCollection services) { + services.AddEmptyProviders(); // 途中省略 }
_Host.cshtmlにJavaScriptとCSSを追加します。
※_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() }; } }
実行します。
Chart.jsって感じですね。
折れ線以外にも棒グラフ, ドーナッツなど通常(?)使いそうなものもちゃんと用意されています。
おわり
Blazorise応援してます。
