日期时间作为 x 轴 blazorise 折线图上的标签

问题描述

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

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

如果我使用它自己的日期,如下所示,所有日期都位于 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 可以很好地设置轴的最小值或最大值。

有人可以给我一些指点吗?

解决方法

我解决了它(好吧,两个 SO 用户做到了,Henk Holterman 和 enet)见:Solution needed for Field initializer cannot reference the non-static field method or property in Blazor