如何在 blazor 中使用 chart.js？

问题描述

我正在尝试遵循 mariusmuntean/ChartJs.Blazor 中的这个示例：

https://github.com/mariusmuntean/ChartJs.Blazor

代码运行但我收到此错误：

InvalidOperationException：“Project.Shared.Chart”类型的对象确实如此 没有与名称“@Config”匹配的属性。

@page "/charts/bar/horizontal"
@using ChartJs.Blazor.PieChart
@using System.Drawing
@* @layout SampleLayout *@
@using ChartJs.Blazor.Util
@using ChartJs.Blazor.Common
@using ChartJs.Blazor.Common.Axes
@using ChartJs.Blazor.Common.Axes.Ticks
@using ChartJs.Blazor.Common.Enums
@using ChartJs.Blazor.Common.Handlers
@using ChartJs.Blazor.Common.Time
@using ChartJs.Blazor.Interop

<Chart Config="_config"></Chart>

@code {


private PieConfig _config;

protected override void OnInitialized()
{
    _config = new PieConfig
    {
        Options = new PieOptions
        {
            Responsive = true,Title = new OptionsTitle
            {
                display = true,Text = "ChartJs.Blazor Pie Chart"
            }
        }
    };

    foreach (string color in new[] { "Red","Yellow","Green","Blue" })
    {
        _config.Data.Labels.Add(color);
    }

    PieDataset<int> dataset = new PieDataset<int>(new[] { 6,5,3,7 })
    {
        BackgroundColor = new[]
        {
            ColorUtil.ColorHexString(255,99,132),// Slice 1 aka "Red"
            ColorUtil.ColorHexString(255,205,86),// Slice 2 aka "Yellow"
            ColorUtil.ColorHexString(75,192,192),// Slice 3 aka "Green"
            ColorUtil.ColorHexString(54,162,235),// Slice 4 aka "Blue"
        }
    };

    _config.Data.Datasets.Add(dataset);
}
}

解决方法

经过多次试验后，我发现应该这样写：

<ChartJs.Blazor.Chart Config="_config"></ChartJs.Blazor.Chart>

代替：

<Chart Config="_config"></Chart>