如何將 cursor 移動到圖表上的任何位置，而不僅僅是在系列數據點上？

Question

我有 2 個點線系列，每個系列都有默認的 cursor。 默認的 cursor 沿着系列數據（點）運行。 我想要的是一個 cursor，我可以在圖表中的任何位置移動，而不僅僅是在系列數據上。

Answer 1

謝謝你的問題。 根據標簽，我假設您使用的是LightningChart JS 。

如果我正確理解了您想要的行為，您希望 cursor 始終位於用戶鼠標上，並在結果表中顯示已解決的最近數據點。

這可以通過Chart Marker來實現，它基本上是一個 cursor，可以在應用程序代碼中創建和定位。

這是有關如何操作的代碼片段：

• 監聽文檔上的鼠標事件。

• 從系列中求解最近的數據點。

• position 圖表標記在任意位置。

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

如果有人正在尋找一種也適用於非全屏圖表的解決方案，以下內容可能會有所幫助。

我添加了以下內容以獲取元素的當前 position：

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

確保在偵聽器中調用 position，因為它們會隨着您滾動頁面或調整瀏覽器 window 的大小而變化。

之后，您可以計算正確的 position：

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>