带有timeseries数据的Blazorise图表

Question

我正在开发一个门户网站。该网站将在图表中显示一些时间序列数据。对于图表，我使用Blazorise.Charts (1.0.5)。

我想要图表显示完整的日期在一天的开始和之间，只有几个小时(以24小时的格式)和分钟。然而，似乎Blazorise不接受我的输入。

我的数据模型：

public class point
{
    public double Value;
    public DateTime ReceivedOn;
}

我使用的选项

public LineChartOptions _LineChartOptions { get; set; } = new LineChartOptions()
{
    Parsing = new ChartParsing
    {
        XAxisKey = "ReceivedOn",
        YAxisKey = "Value",
    },
    Scales = new ChartScales()
    {
        X = new ChartAxis()
        {
            Display = true,
            Type = "timeseries",
            Title = new ChartScaleTitle
            {
                Display = true,
                Text = "Date"
            },
            Ticks = new ChartAxisTicks
            {
                StepSize = 1,
                Major = new ChartAxisMajorTick
                {
                    Enabled = true
                },
            },
        }
    }
}

我也尝试过添加Time = new ChartAxisTime，但如果您使用滴答键，则该选项似乎不起作用。

使用这些设置时得到的结果是：图表

正如你所看到的，这似乎是我想要的，但是标签必须是HH:mm格式，日期需要是yyyy格式。

我需要改变什么才能得到这个结果？

Answer 1

我遇到了同样的问题。老实说，在阅读了Chart.js文档之后，我就不再试图将DateTime对象直接输入到blazorise图表中了。根据Chart.js文档，它必须被转换到某个位置，因为日期作为字符串输入到Chart.js中。因此，我将我的DateTime[]转换为一个带有DateTime模式"O"的string[] (o格式说明符DE文化2008-10-31T17:04:32.0000000)，一切都进行得很顺利。

此外，首先尝试使用time而不是timeseries作为x标度类型。timeseries类型在无设备的远程数据上表现得很奇怪。

我的LineChartOptions

public static LineChartOptions CreateLineChartOptions()
    {
        return new LineChartOptions()
        {
            Scales = new ChartScales()
            {
                X = new ChartAxis()
                {
                    Type = "time",
                    Time = new ChartAxisTime()
                    {
                        Unit = "minute",
                        MinUnit = "minute"
                    }
                }
            }
        };
    }

我的标签格式不对，就像你的一样，我还在努力呢。

我的Razor电话：

<LineChart @ref="lineChart" TItem="double" Options="@LineChartOptions" />

作为最小的例子，您甚至可以离开ChartAxisTime()对象。它应该不用它就能运行。

我的最小结果是：

​

​