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

我在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没有被识别。

解决方案:

你可以使用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。

给TA打赏
共{{data.count}}人
人已打赏
未分类

是否有一种简单的方法来获取使用google Sheets API的google sheet中单元格的底层URL?

2022-9-8 21:16:37

未分类

高朗Gorm动态目标结构

2022-9-8 21:16:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索