动态添加图表组件到剃须刀页面

Question

我已经用大麻架构建了一个不错的图表（服务器）组件。它使用jschart。一切都很好，效果很好。

在图表组件内。我有这个。

@using Blazorise.Charts
<Div Style=@($"position: relative; height:{ViewHeight}vh; width:{ViewWidth}vw;")>
    <LineChart @ref="lineChart" TItem="double" Clicked="@OnClicked"  Options="@chartOptions"/>
</Div>

（请注意 linechart 参考），在razor.cs文件中，我也定义了一个linechart变量（在剃须刀页中用作ref

 LineChart<double> lineChart;

）正常工作。

<ChartComponent ViewHeight=50 ViewWidth=80 ColorScheme="Classic20" Multiple=true Items=@items></ChartComponent>

但是现在我想将这些组件的多个添加到页面上。

@foreach (string graphSelector in datasets)
{
     <ChartComponent ViewHeight=50 ViewWidth=80 ColorScheme="Classic20" Multiple=true Items=@(items.Where(p => p.CounterInstance == graphSelector).ToList())></ChartComponent>
}

但是，当我将其放入一个方面时，我会遇到一个错误，说明LINECHART是无效的... 我尝试了几件事，但我的猜测是我缺少一些东西。

在我做的图表组件内，

await lineChart.Clear();

这给了我一个

对象引用未设置为对象的实例。

尝试了几件事，但不知道如何解决。

我尝试了Metinyakar.net提出的解决方案，但我仍然得到相同的结果。

ChartComponent并非零，而是图表组件中的某些变量。

似乎当组件在第一个渲染过程中的页面上时，它将起作用，但是当该组件在第一个渲染期间不在页面上时，组件未正确初始化，图表本身就会失败。

我在ChartComponent中有以下代码。

        private async Task DataSetToChartSeries()
        {
            // Create a list of date labels
            string[] dateLabels = Items.Select(x => x.TimeRun.ToString("yyyy-MM-dd hh:mm")).Distinct().ToArray();
            await lineChart.Clear();
            await lineChart.AddLabels(dateLabels);
            if (Multiple == true)
            {
                List<string> datasets = Items.Select(p => p.CounterInstance).Distinct().ToList();
                foreach (string graphSelector in datasets)
                {
                    List<QueryResult> graphDataSet = Items.Where(p => p.CounterInstance == graphSelector).ToList();
                    await lineChart.AddDataSet(GetLineChartDataset(graphDataSet));
                }
            }
            else
            {
                await lineChart.AddDataSet(GetLineChartDataset(Items));
            }
            await lineChart.Update(); <-- This line causes the error
        }

另外，我在剃须刀文件中也有这个：

   @* Does not work*@
@*    @foreach (string key in chartSeries.Keys)
    {
        <ChartComponent ViewHeight=20 ViewWidth=80 ColorScheme="Classic20"  Multiple=true Items=@(GetChartSeries(key))></ChartComponent>
    }*@
    @*This does work but is not dynamic*@
    <ChartComponent ViewHeight=20 ViewWidth=80 ColorScheme="Classic20"  Multiple=true Items=@(GetChartSeries("Error"))></ChartComponent>
    <ChartComponent ViewHeight=20 ViewWidth=80 ColorScheme="Classic20"  Multiple=true Items=@(GetChartSeries("Information"))></ChartComponent>
    <ChartComponent ViewHeight=20 ViewWidth=80 ColorScheme="Classic20"  Multiple=true Items=@(GetChartSeries("Warning"))></ChartComponent>

问题与图表首次渲染时不在那里的图表有关。

Answer 1

items =@（items.Where（p =＆gt; p.counterinstance == graphSelector）对我来说有点可疑。是ounder> outernstance a字符串，以及在 认为这根本不应该是字符串。

我

@foreach (string graphSelector in datasets)
{
     <ChartComponent ViewHeight=50 ViewWidth=80 ColorScheme="Classic20" Multiple=true Items=@(items.Where(p => p.CounterInstance == graphSelector).ToList())></ChartComponent>
}

字符串GraphSelector 代码>，但是在＆lt; ChartComponent＆gt;中没有什么比

Answer 2

您需要在Blazor Project中使用属性值并添加第一声。前任;

LineChart<double> lineChart { get; set; } = new LineChart<double>();

并在视图中检查null以显示显示

@if(datasets?.Count > 0){
    @foreach (string graphSelector in datasets)
    {
         <ChartComponent ViewHeight=50 ViewWidth=80 ColorScheme="Classic20" Multiple=true Items=@(items.Where(p => p.CounterInstance == graphSelector).ToList())></ChartComponent>
    }
 } else {
    <b>datasets object null or empty</b>
}

Answer 3

好的，感谢您的帮助。

我从Henk那里获得了建议，并从“ Blazorise Chart”示例中从头开始使用Codebase。我像对自己的组件一样包裹了这一点，而我可以将其中的多个添加到我的页面中。

经过很多追踪和尝试最重要的更改之后，我将图表的初始化移至了ofterRenderAsync。

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await DataSetToChartSeries();
        }
    }

这使一切有所不同