时间戳

首页 > 解决方案 > 在 ChartJs.Blazor 中向 ChartJsLineChart 发送数据

chart.js - 在 ChartJs.Blazor 中向 ChartJsLineChart 发送数据

问题描述

我在 ChartJs.Blazor nuget 中使用 ChartJsLineChart，我一直在向 ChartJsLineChart 发送数据。

所有的例子，包括这个

http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4363/Adding-Charts-To-Server-Side-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 的替代品是什么。我尝试使用元组，但结果是一个空白图表，即。没有无法识别的 YValues。

标签： chart.jsblazor

解决方案

您可以使用 ChartJs.Blazor 支持的任何引用类型向图表添加数据。我确定了与折线图一起使用的 3 种主要数据类型。
1) 如果您只想沿 x 轴和 y 轴使用 (double/int) 值类型，则可以使用 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) 如果您希望沿 y 轴针对 x 轴上的字符串标签绘制 double（或 int）值，则需要使用 ChartJs.Blazor.ChartJS.Common.Wrappers 命名空间中提供的 Wrappers 并将 xAxes 配置为配置中的 CategoryAxis 对象。托管在https://github.com/LearnC0de/BlazorAppLineChart/blob/master/BlazorAppLineChart/BlazorAppLineChart/Pages/LineChart.razor上的代码中提供了一个示例

推荐阅读