我正在将LightningChart JS与一个线系列一起使用,并且订阅了该系列上的mousedrag事件,这又返回了起点的坐标。当我在该点上运行random_state=0
时,它将返回具有最接近y值的点(根据我的观察)。我想获得距离最近的点。
谢谢。
答案 0 :(得分:1)
solveNearestFromScreen
方法返回的点取决于所使用的DataPattern
。如果使用DataPatterns.horizontalProgressive
,DataPatterns.horizontalRegressive
,DataPatterns.verticalProgessive
或DataPatterns.verticalRegressive
数据模式,则solveNearestFromScreen
返回的点仅基于单轴值。如果该系列使用DataPatterns.freeForm
(默认设置),则返回的点将是最接近的数据点。
HorizontalProgressive模式求解最近的位置:
FreeForm模式解决最近的问题:
ChartXY
上还有一种solveNearest
方法,可用于求解距多轴的最近距离。
使用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>