Как мне навести курсор на график в любом месте, а не только на точки данных серии? - PullRequest
0 голосов
/ 22 октября 2019

У меня есть 2 ряда точек, каждая из которых имеет курсор по умолчанию. Курсор по умолчанию проходит вдоль данных серии (точек). Мне нужен курсор, который я могу перемещать в любом месте графика, а не только на данные ряда.

1 Ответ

2 голосов
/ 22 октября 2019

спасибо за ваш вопрос. Основываясь на тегах, я предполагаю, что вы используете LightningChart JS .

Если я правильно понял желаемое поведение, вы бы хотели, чтобы курсор всегда был расположен на пользовательской мыши,и отображение решенной ближайшей точки данных в таблице результатов.

Этого можно достичь с помощью Маркер диаграммы , который в основном представляет собой курсор, который можно создать и поместить в код приложения.

Custom cursor with ChartMarkerXY

Вот фрагмент кода о том, как:

  • прослушивать события мыши в документе.

  • решить ближайшую точку данных из серии.

  • позиционировать маркер диаграммы в произвольном месте.

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