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

Question

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

Answer 1

谢谢你的问题。根据标签，我假设您使用的是LightningChart JS。

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

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

这是有关如何操作的代码片段：

• 监听文档上的鼠标事件。

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

• 在任意位置定位图表标记。

const marker = chart.addChartMarkerXY()

document.addEventListener( 'mousemove', ( event ) => {
    // Solve nearest data point.
    const cursorPoint = chart.solveNearest( { x: event.clientX, y: event.clientY } )
    // Translate mouse location to Axis.
    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 )
} )

Answer 2

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

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

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 {
    lightningChart,
    AxisTickStrategies,
    DataPatterns,
    SolidLine,
    translatePoint,
    AutoCursorModes
} = lcjs

const containerId = 'chart-container';
const chart = lightningChart().ChartXY({
    containerId,
}).setAutoCursorMode(AutoCursorModes.disabled)

const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()
             
const data = [];

for (let i = 0; i < 10; i++) {
  data[i] = {x: i, y: Math.floor(Math.random() * 10)};
}

const lineSeries = chart.addLineSeries({
                  xAxis: axisX,
                  yAxis: axisY,
                  dataPattern: DataPatterns.horizontalProgressive

              })
            .setMouseInteractions(false);


lineSeries.add(data);


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 } )
    // Translate mouse location to Axis.

    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 )
    }

} )

.chart-container-wrapper {
    width: 80%;
    height: 300px;
    margin: 10px auto;
}
        
        
#chart-container {
    width: 100%;
    height: 100%;
}

<div class="chart-container-wrapper">
    <div id='chart-container'></div>
  </div>
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>