如何在blazor中使用chart.js

Question

我正试图从marius muntean/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);
}
}

Answer 1

经过几次尝试，我发现它应该这样写：

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

代替：

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