Javascript Blazor图表垂直线

我正在努力用Blazor制作仪表盘。但我对js和css还不熟悉，所以感觉有些困难

目前，我正在实现图表组件，我想添加垂直线，它会自动移动，如下图所示

我搜索了很多页面，但我甚至不知道该怎么办

我不是要你写代码，但如果能告诉我一些我可以参考的网站、方法或库，那就太好了

处境 我正在使用.NETCore5.0

我的尝试

• 创建一个表示为垂直线的数据集，设置计时器，并每秒移动垂直线数据一次。（应继续调用StateHasChange（）函数）
• 使用css绘制垂直线（但我不知道如何移动它）

---

谢谢您的阅读。

我不知道Blazorise图表，也许还有一个内置的解决方案

如果你想用一种非常简单的方法来解决这个问题，你可以创建一个与图表高度相同的

。然后你可以使用

顶部
和
左侧
将
div设置在图表最左侧的位置（您可能必须给出
div
a和
position:absolute
，以便它显示在图表上）。这些位置应该保存在一个C变量中。现在您可以实现一个函数，它增加
left
值并调用
statehaschange（）
方法

这是一个非常粗糙的解决方案，但它应该如预期的那样工作。但是您必须注意，在不同的设备上，图表可以以另一种方式显示，因此，
div
可能不再对齐。
由于Blazorise在内部使用ChartJs绘制图表，您可能可以使用。您可能需要利用JavaScript插入插件选项的互操作方法

或者，您也可以自己画线，因为图表在
元素中呈现：

下面是我使用的一段代码（我个人使用，我的图表是条形图，因此您需要调整代码以适合您自己的需要和库）

这段代码向图表添加了一个名为lineAtIndex的选项，设置该选项后，将在画布上提供的索引处绘制一条线

我使用的方法如下：

if (ShowAvgLine)
    {
        if (currentAverage != 0.0)
            {
                jSRuntime.InvokeVoidAsync("generalInterop.annotationConfig", _config.CanvasId, currentAverage);
            }
    }

如果将上述方法用于库，则可以尝试以前的解决方案，即对interop方法进行定时调用以移动它

if (ShowAvgLine)
    {
        if (currentAverage != 0.0)
            {
                jSRuntime.InvokeVoidAsync("generalInterop.annotationConfig", _config.CanvasId, currentAverage);
            }
    }