在ChartJs.Blazor中发送数据到ChartJsLineChart。

Question

我在ChartJs.Blazor nuget中使用ChartJsLineChart，但我在发送数据到ChartJsLineChart时被卡住了。

所有的例子包括这个

http:/blazorhelpwebsite.comBlogtabid61EntryId4363Adding-Charts-To服务器端-Blazor-Using-ChartJs-Blazor.aspx。

使用TimeTuple作为向数据集添加数据的方式。

_WeightDataSet = new LineDataset<TimeTuple<int>>
        {
            BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.White),
            BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
            Label = "Weight per Day",
            Fill = false,
            BorderWidth = 2,
            PointRadius = 2,
            PointBorderWidth = 2,
            SteppedLine = SteppedLine.False,
            Hidden = false
        };

我想知道有什么可以替代TimeTuple。我试过使用Tuple，但结果是一个空白的图表，即没有YValues没有被识别。

Answer 1

你可以使用ChartJs.Blazor支持的任何引用类型来向图表添加数据。我确定了3种主要的数据类型，这些数据类型与线型图一起使用。1）如果你只是想沿x轴和y轴使用一个（doubleint）值类型，那么你可以使用ChartJs.Blazor.ChartJS.Common.Point数据类型。例如

_WeightDataSet = new LineDataset<ChartJs.Blazor.ChartJS.Common.Point>
        {
            BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.White),
            BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
            Label = "Weight per Day",
            Fill = false,
            BorderWidth = 2,
            PointRadius = 2,
            PointBorderWidth = 2,
            SteppedLine = SteppedLine.False,
            Hidden = false
        };

你可能还得在配置中把xAxes配置成LinearCartesianAxis对象才行。2) 如果你想让x轴有一个时间值，而y轴有一个双倍值，那么你需要使用TimeTuple，就像你引用的例子中提到的那样。你可能还需要将配置中的xAxes对象配置为TimeAxis对象。3）如果你想让双倍（或int）值沿着y轴对着x轴上的字符串标签绘制，那么你需要使用ChartJs.Blazor.ChartJS.Common.Wrappers命名空间中提供的Wrappers，并在配置中把xAxes配置为CategoryAxis对象。下面的代码中提供了一个例子。https:/github.comLearnC0deBlazorAppLineChartblobmasterBlazorAppLineChartBlazorAppLineChartPagesLineChart.razor。