Javascript 如何将光标移动到图表的任何位置，而不仅仅是系列数据点上？

我有两个点线系列，每个都有默认光标。默认光标沿系列数据（点）运行。我想要的是一个光标，我可以在图表中的任何位置移动，而不仅仅是在序列数据上。

谢谢你的提问。基于这些标记，我假设您使用的是LightningChart JS

如果我正确理解了您想要的行为，您希望光标始终位于用户鼠标上，并在结果表中显示已求解的最近数据点

这可以通过一个图表标记来实现，它基本上是一个可以在应用程序代码中创建和定位的光标

下面是一段关于如何：

• 侦听文档上的鼠标事件

• 从序列中求解最近的数据点

• 将图表标记放置在任意位置

const marker=chart.addChartMarkerXY（）
document.addEventListener（'mousemove'，（事件）=>{
//求解最近的数据点。
const cursorPoint=chart.solveNearest（{x:event.clientX，y:event.clientY}）
//将鼠标位置平移到轴。
const locationaxes=translatePoint(
chart.engine.clientLocation2Engine（event.clientX，event.clientY），
图表。引擎。比例，
{
x:chart.getDefaultAxisX（）.scale，
y:chart.getDefaultAxisY（）.scale
}
)
//定位图表标记，但覆盖其位置。
标记
.pointAt（光标点）
//将光标位置替代为鼠标位置。
.设置位置（位置A）
} )

如果有人正在寻找一种也适用于非全屏图表的解决方案，以下内容可能会有所帮助

我添加了以下内容以获取元素的当前位置：

const elemLeftSpace = elem.getBoundingClientRect().left;
const elemTopSpace = elem.getBoundingClientRect().top;

在滚动页面或调整浏览器窗口大小时，确保调出侦听器中的位置

之后，您可以计算正确的位置：

const cursorPoint = chart.solveNearest( { x: event.clientX - elemLeftSpace, y: event.clientY - elemTopSpace } );

完整代码：

const marker = chart.addChartMarkerXY();
const elem = document.getElementById('chart-container');
    
elem.addEventListener( 'mousemove', ( event ) => {

    const elemLeftSpace = elem.getBoundingClientRect().left;
    const elemTopSpace = elem.getBoundingClientRect().top;

    // Solve nearest data point.
    const cursorPoint = chart.solveNearest( { x: event.clientX - elemLeftSpace, y: event.clientY - elemTopSpace } );

    if (cursorPoint) {
        const locationOnAxes = translatePoint(
            chart.engine.clientLocation2Engine( event.clientX, event.clientY ),
            chart.engine.scale,
            {
                x: chart.getDefaultAxisX().scale,
                y: chart.getDefaultAxisY().scale
            }
        );
        // Position Chart Marker, but override its location.
        marker
            .pointAt( cursorPoint )
            // Override Cursor location to that of mouse location.
            .setPosition( locationOnAxes );
})

工作示例如下：

const{
光照图，
战略,，
数据模式，
实线，
翻译点，
自动模式
}=lcjs
const containerId='图表容器'；
常量图表=lightningChart（）.ChartXY({
集装箱运输，
}).setAutoCursorMode（AutoCursorModes.disabled）
const axisX=chart.getDefaultAxisX（）
const axisY=chart.getDefaultAxisY（）
常量数据=[]；
for（设i=0；i<10；i++）{
数据[i]={x:i，y:Math.floor（Math.random（）*10）}；
}
const lineSeries=chart.addLineSeries({
xAxis:axix，
雅克西斯：轴，
dataPattern:DataPatterns.horizontalProgressive
})
.setMouseInteractions（错误）；
lineSeries.add（数据）；
const marker=chart.addChartMarkerXY（）
const elem=document.getElementById（'chart-container'）；
元素addEventListener（'mousemove'，（事件）=>{
常量elemlefstspace=elem.getBoundingClientRect（）.left；
常量elemTopSpace=elem.getBoundingClientRect（）.top；
//求解最近的数据点。
const cursorPoint=chart.solveNearest（{x:event.clientX-elemlefstspace，y:event.clientY-elemTopSpace}）
//将鼠标位置平移到轴。
如果（光标点）{
const locationaxes=translatePoint(
chart.engine.clientLocation2Engine（event.clientX，event.clientY），
图表。引擎。比例，
{
x:chart.getDefaultAxisX（）.scale，
y:chart.getDefaultAxisY（）.scale
}
)
//定位图表标记，但覆盖其位置。
标记
.pointAt（光标点）
//将光标位置替代为鼠标位置。
.设置位置（位置A）
}
}）

.chart容器包装器{
宽度：80%；
高度：300px；
利润率：10px自动；
}
#图表容器{
宽度：100%；
身高：100%；
}

如果您在问题中发布代码示例非常有用，这取决于您如何呈现图表，请尽可能提供更多详细信息，或者提供有关图表生成方式的部分代码。感谢您的回答和详细解释。不幸的是，只有当图表占据100%的浏览器窗口时，这才有效。在距离窗口边缘有一定距离的嵌套图表中，即使侦听器直接位于图表上，x和y值也会移动。