javascript - 离屏幕最近的线系列解决方案不返回适当的值

Question

我将 LightningChart JS 与线系列一起使用，并且订阅了系列上的 mousedrag 事件，这又会返回起点的坐标。当我在该点上运行 solveNearestFromScreen 时，它返回具有最接近 y 值的点(根据我的观察)。我想获得距离最近的点。

提前致谢。

Answer 1

solveNearestFromScreen 返回的点方法取决于使用的 DataPattern .如果您正在使用 DataPatterns.horizo​​ntalProgressive、DataPatterns.horizo​​ntalRegressive、DataPatterns.verticalProgessive 或 DataPatterns.verticalRegressive 数据模式solveNearestFromScreen 返回的点仅基于单轴值。如果该系列使用 DataPatterns.freeForm(这是默认设置)，则返回的点将是最近的数据点。

Horizo​​ntalProgressive 模式求解最近:

自由形式模式解决最近:

还有一个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/lcjs@1.3.1/dist/lcjs.iife.js"></script>