0

我正在尝试向我的 blazor 服务器端项目添加折线图，日期在 x 轴上。

如果我将日期转换为字符串，一切都很好，但我需要 datetime 因为间隔不是恒定的，我想在数据点之间使用自动间隔。

如果我使用它自己的日期，如下所示，所有日期都位于 x 轴的第一个刻度上，全部排列在一个整齐的列中。

 LineChart<double> lineChart;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await HandleRedraw();
        }
    }

    async Task HandleRedraw()
    {
        await lineChart.Clear();
        await lineChart.AddLabels(GetDateTimeLabels());
        await lineChart.AddDataSet(GetLineChartDataset());
        await lineChart.Update();            
    }

    LineChartDataset<double> GetLineChartDataset()
    {
        return new LineChartDataset<double>
        {
            //usual stuff to build the data set
        };
    }
    
    public DateTime[] GetDateTimeLabels()
    {
        //fill array with dates
        return dateLabels;
    }

我尝试在组件中添加一个 OptionJsonString 以指示 x 轴的类型是时间，如下所示：

<LineChart @ref="lineChart" TItem="double" OptionsJsonString="@("{\"scales\": {\"xAxes\": [{\"type\": 'time'}]}}")"/>

但是图表根本没有呈现。OptionJsonString 可以很好地设置轴的最小值或最大值。

有人可以给我一些指示吗？

4

1 回答 1

0

我解决了它（好吧，两个 SO 用户做了，Henk Holterman 和 enet）请参阅：字段初始化程序所需的解决方案无法引用 Blazor 中的非静态字段方法或属性

于 2021-04-10T19:37:47.527 回答