Blazor WebAssemblyで円グラフを書く

Blazorで棒グラフや円グラフを表示させたい場合はChartJs.Blazorを使うのが便利です。

NuGetパッケージマネージャーで「ChartJs.Blazor」をインストールします。次に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" />

_imports.razorに以下のコードを追加します。

@using ChartJs.Blazor

1	@using ChartJs.Blazor

まずは最低限のコードから。

@page "/"

@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.Util

@* usingの追加をしているのですが、あえて名前空間も書いています。 *@

<h1>Hello, ChartJs.Blazor!</h1>

<ChartJs.Blazor.Charts.ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="400" Height="200" />

@code {
    private ChartJs.Blazor.ChartJS.PieChart.PieConfig _config;
    private ChartJs.Blazor.Charts.ChartJsPieChart _pieChartJs;

    private string[] sampleLabel = { "データA", "データB", "データC", "データD" };
    private double[] sampleRange = { 1.0, 2.0, 3.0, 4.0 };

    protected override void OnInitialized()
    {
        _config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();
        _pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

        var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);
        _config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();
        _config.Data.Labels.AddRange(sampleLabel);

        SetDataSet();
    }

    void SetDataSet()
    {
        _config.Data.Datasets.Clear();
        ChartJs.Blazor.ChartJS.PieChart.PieDataset pieSet = new ChartJs.Blazor.ChartJS.PieChart.PieDataset();
        pieSet.Data.AddRange(sampleRange);

        pieSet.BorderWidth = 1;
        pieSet.BorderColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Black);
        pieSet.BackgroundColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.White);
        _config.Data.Datasets.Add(pieSet);
    }
}

@page "/"

@using ChartJs.Blazor.Charts

@using ChartJs.Blazor.ChartJS.PieChart

@using ChartJs.Blazor.ChartJS.Common.Properties

@using ChartJs.Blazor.Util

@* usingの追加をしているのですが、あえて名前空間も書いています。 *@

<h1>Hello, ChartJs.Blazor!</h1>

<ChartJs.Blazor.Charts.ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="400" Height="200" />

@code {

private ChartJs.Blazor.ChartJS.PieChart.PieConfig _config;

private ChartJs.Blazor.Charts.ChartJsPieChart _pieChartJs;

private string[] sampleLabel = { "データA", "データB", "データC", "データD" };

private double[] sampleRange = { 1.0, 2.0, 3.0, 4.0 };

protected override void OnInitialized()

{

_config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();

_pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);

_config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();

_config.Data.Labels.AddRange(sampleLabel);

SetDataSet();

}

void SetDataSet()

{

_config.Data.Datasets.Clear();

ChartJs.Blazor.ChartJS.PieChart.PieDataset pieSet = new ChartJs.Blazor.ChartJS.PieChart.PieDataset();

pieSet.Data.AddRange(sampleRange);

pieSet.BorderWidth = 1;

pieSet.BorderColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Black);

pieSet.BackgroundColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.White);

_config.Data.Datasets.Add(pieSet);

}

色分けして表示されるようにしてみましょう。

@code {
    private string[] sampleBgColor = {
        ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
        ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Blue),
        ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Green),
        ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Yellow)};

    void SetDataSet()
    {
        _config.Data.Datasets.Clear();
        ChartJs.Blazor.ChartJS.PieChart.PieDataset pieSet = new ChartJs.Blazor.ChartJS.PieChart.PieDataset();
        pieSet.Data.AddRange(sampleRange);

        pieSet.BorderWidth = 1;
        pieSet.BorderColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Black);

        // ここを変更
        pieSet.BackgroundColor = sampleBgColor;
        _config.Data.Datasets.Add(pieSet);
    }
}

@code {

private string[] sampleBgColor = {

ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red),

ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Blue),

ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Green),

ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Yellow)};

void SetDataSet()

{

_config.Data.Datasets.Clear();

ChartJs.Blazor.ChartJS.PieChart.PieDataset pieSet = new ChartJs.Blazor.ChartJS.PieChart.PieDataset();

pieSet.Data.AddRange(sampleRange);

pieSet.BorderWidth = 1;

pieSet.BorderColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Black);

// ここを変更

pieSet.BackgroundColor = sampleBgColor;

_config.Data.Datasets.Add(pieSet);

}

円グラフにタイトルをつけます。

@code {
    protected override void OnInitialized()
    {
        _config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();
        _pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

        _config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();
        _config.Options.Title = new ChartJs.Blazor.ChartJS.Common.Properties.OptionsTitle
        {
            Text = "鳩でもわかる円グラフ",
            Display = true,
            FontColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
            FontSize = 50,
            FontStyle = ChartJs.Blazor.ChartJS.Common.Enums.FontStyle.Italic,
            Position = ChartJs.Blazor.ChartJS.Common.Enums.Position.Bottom,
        };

        _config.Data.Labels.AddRange(sampleLabel);

        SetDataSet();
    }

@code {

protected override void OnInitialized()

{

_config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();

_pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

_config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();

_config.Options.Title = new ChartJs.Blazor.ChartJS.Common.Properties.OptionsTitle

{

Text = "鳩でもわかる円グラフ",

Display = true,

FontColor = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red),

FontSize = 50,

FontStyle = ChartJs.Blazor.ChartJS.Common.Enums.FontStyle.Italic,

Position = ChartJs.Blazor.ChartJS.Common.Enums.Position.Bottom,

};

_config.Data.Labels.AddRange(sampleLabel);

SetDataSet();

}

円グラフが出現するときアニメーションさせます。

@code {
    protected override void OnInitialized()
    {
        _config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();
        _pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

        var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);
        _config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();
        _config.Options.Animation = new ChartJs.Blazor.ChartJS.Common.Properties.ArcAnimation
        {
            AnimateRotate = true,
            AnimateScale = true,
            Easing = ChartJs.Blazor.ChartJS.Common.Enums.Easing.EaseOutElastic,
        };

        _config.Data.Labels.AddRange(sampleLabel);

        SetDataSet();
    }

@code {

protected override void OnInitialized()

{

_config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();

_pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);

_config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();

_config.Options.Animation = new ChartJs.Blazor.ChartJS.Common.Properties.ArcAnimation

{

AnimateRotate = true,

AnimateScale = true,

Easing = ChartJs.Blazor.ChartJS.Common.Enums.Easing.EaseOutElastic,

};

_config.Data.Labels.AddRange(sampleLabel);

SetDataSet();

}

アニメーションをしません。

@code {
    protected override void OnInitialized()
    {
        _config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();
        _pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

        var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);
        _config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();
        _config.Options.Animation = new ChartJs.Blazor.ChartJS.Common.Properties.ArcAnimation
        {
            AnimateRotate = false,
        };

        _config.Data.Labels.AddRange(sampleLabel);

        SetDataSet();
    }

@code {

protected override void OnInitialized()

{

_config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();

_pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);

_config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();

_config.Options.Animation = new ChartJs.Blazor.ChartJS.Common.Properties.ArcAnimation

{

AnimateRotate = false,

};

_config.Data.Labels.AddRange(sampleLabel);

SetDataSet();

}

これまではディスプレイの幅に応じてサイズ変更されましたが、サイズを固定します。

@code {
    protected override void OnInitialized()
    {
        _config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();
        _pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

        var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);
        _config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();
        _config.Options.Responsive = false;

        _config.Data.Labels.AddRange(sampleLabel);

        SetDataSet();
    }

@code {

protected override void OnInitialized()

{

_config = new ChartJs.Blazor.ChartJS.PieChart.PieConfig();

_pieChartJs = new ChartJs.Blazor.Charts.ChartJsPieChart();

var s = ChartJs.Blazor.Util.ColorUtil.FromDrawingColor(System.Drawing.Color.Red);

_config.Options = new ChartJs.Blazor.ChartJS.PieChart.PieOptions();

_config.Options.Responsive = false;

_config.Data.Labels.AddRange(sampleLabel);

SetDataSet();

}

Blazor WebAssemblyで円グラフを書く

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ