Серия строк, ближайшая к экрану, не возвращает соответствующие значения

Я использую LightningChart JS с серией линий и подписываюсь на событие перетаскивания мышью в этой серии, это, в свою очередь, возвращает координаты начальной точки. Когда я запускаю solveNearestFromScreen в точке, он возвращает точку с ближайшим значением y (согласно моим наблюдениям). Я хотел бы получить точку, ближайшую по расстоянию.

Заранее спасибо.


javascript lightningchart
person Yash.S.Narang    schedule 03.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Точка, возвращенная solveNearestFromScreen зависит от используемого DataPattern. Если вы используете шаблон данных DataPatterns.horizontalProgressive, DataPatterns.horizontalRegressive, DataPatterns.verticalProgessive или DataPatterns.verticalRegressive, точка, возвращаемая solveNearestFromScreen, основана только на значении одной оси. Если в серии используется DataPatterns.freeForm (по умолчанию), возвращаемая точка будет ближайшей точкой данных.

Горизонтальный прогрессивный шаблон решает ближайший:

Расчет прогрессивного шаблона

Ближайшее решение шаблона FreeForm:

Решение FreeForm

Также есть solveNearest метод на ChartXY, который можно использовать для решения ближайшей из нескольких осей.

При использовании методов solveNearest или solveNearestFromScreen важно перед решением преобразовать положение мыши в координатное пространство движка. Это можно сделать с помощью chart.engine.clientLocation2Engine(event.clientX, event.clientY). Этот метод преобразует заданную координату мыши в точку в координатах двигателя, которую затем можно использовать для определения ближайшей точки.

const marker = chart.addChartMarkerXY()
chart.onSeriesBackgroundMouseDrag((obj, ev)=>{
    const m = chart.engine.clientLocation2Engine(ev.clientX,ev.clientY)
    marker.setPosition(chart.solveNearest(m).location)
})

Ниже приведен полный пример кода для перемещения маркера в ближайшую точку при перетаскивании мышью области серии.

const {
    lightningChart,
    SolidLine,
    SolidFill,
    ColorRGBA,
    AxisTickStrategies,
    UIOrigins,
    DataPatterns
} = lcjs

const chart = lightningChart().ChartXY()

const diesel = [
    { x: 0, y: 1.52 },
    { x: 1, y: 1.52 },
    { x: 2, y: 1.52 },
    { x: 3, y: 1.58 },
    { x: 4, y: 2.00 },
    { x: 5, y: 2.00 },
    { x: 6, y: 2.00 },
    { x: 7, y: 2.00 },
    { x: 8, y: 2.26 },
    { x: 9, y: 1.90 },
    { x: 10, y: 1.90 },
    { x: 11, y: 1.90 },
    { x: 12, y: 1.90 },
    { x: 13, y: 1.60 },
    { x: 14, y: 1.60 },
    { x: 15, y: 1.60 },
    { x: 16, y: 1.00 },
    { x: 17, y: 1.00 },
    { x: 18, y: 1.00 },
    { x: 19, y: 1.74 },
    { x: 20, y: 1.47 },
    { x: 21, y: 1.47 },
    { x: 22, y: 1.47 },
    { x: 23, y: 1.74 },
    { x: 24, y: 1.74 },
    { x: 25, y: 1.74 },
    { x: 27, y: 1.5 },
    { x: 28, y: 1.5 },
    { x: 29, y: 1.5 }
]

const gasoline = [
    { x: 0, y: 1.35 },
    { x: 1, y: 1.35 },
    { x: 2, y: 1.35 },
    { x: 3, y: 1.35 },
    { x: 4, y: 1.90 },
    { x: 5, y: 1.90 },
    { x: 6, y: 1.90 },
    { x: 7, y: 1.92 },
    { x: 8, y: 1.50 },
    { x: 9, y: 1.50 },
    { x: 10, y: 1.3 },
    { x: 11, y: 1.3 },
    { x: 12, y: 1.3 },
    { x: 13, y: 1.3 },
    { x: 14, y: 1.3 },
    { x: 15, y: 1.32 },
    { x: 16, y: 1.40 },
    { x: 17, y: 1.44 },
    { x: 18, y: 1.02 },
    { x: 19, y: 1.02 },
    { x: 20, y: 1.02 },
    { x: 21, y: 1.02 },
    { x: 22, y: 1.02 },
    { x: 23, y: 1.02 },
    { x: 24, y: 1.02 },
    { x: 25, y: 1.02 },
    { x: 27, y: 1.30 },
    { x: 28, y: 1.30 },
    { x: 29, y: 1.30 }
]

const lineSeries = chart.addLineSeries()

const lineSeries2 = chart.addLineSeries()

lineSeries2.add(diesel.map((point) => ({ x: point.x, y: point.y })))
lineSeries.add(gasoline.map((point) => ({ x: point.x, y: point.y })))
chart.getDefaultAxisY()
    .setInterval(0, 3, false, true)
chart.setMouseInteractionRectangleZoom(false)
chart.setMouseInteractionRectangleFit(false)

const marker = chart.addChartMarkerXY()

// Add Chart to LegendBox.
chart.onSeriesBackgroundMouseDrag((obj, ev)=>{
    const m = chart.engine.clientLocation2Engine(ev.clientX,ev.clientY)
    marker.setPosition(chart.solveNearest(m).location)
})
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

person Snekw    schedule 06.07.2020