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>
の下に以下のコードを追加します。
<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に以下のコードを追加します。
@using ChartJs.Blazor
チャートを書く
README通りに円グラフを表示せてみたいと思います。
ざっとわけて以下の3工程を行います。
- チャートを表示するために必要なusingの追加
- チャートを表示するコンポーネントの追加
- ConfigとDatasetにデータを設定するためのコードを追加
サンプルページの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は始まったばかりなので色々とエラーが起きるかと思いましたが、特に躓くことなく簡単にチャートを表示させることができました。
他の種類のチャートは作者がサンプルページを用意してくれているためそこで確認することができます。
サンプルページのソースコードはここにありますが、全て用意されているわけではないみたいです(プルリク送ってくれって言ってる)。
サンプルのソースコードを見れば各チャートの使い方も理解できるためしばらく使ってみようかなと思いました。
何かあったら追記するかもしれません(追記するとは言ってない)。
Author And Source
この問題について(ChartJs.Blazorを試してみる), 我々は、より多くの情報をここで見つけました https://qiita.com/KoHey94/items/22fb2ce3b693f6b4242a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .