撒科打诨
鼠标事件在与普通 JS 鼠标事件相同的坐标空间中返回鼠标坐标。要在系列坐标空间中获取点击位置，需要采取几个步骤。首先需要将鼠标坐标转换为引擎坐标空间。引擎坐标空间是画布左下角为0,0的画布区域。这可以通过chart.engine.clientLocation2Engine(ev.clientX,ev.clientY). 这将使用图表引擎比例返回引擎坐标空间中的事件坐标。然后需要将其转换为系列坐标。这可以通过translatePoint方法来完成。translatePoint可用于在两个不同比例之间转换点。LightningChart JS 中的比例基本上是一个坐标空间。const m = chart.engine.clientLocation2Engine(ev.clientX, ev.clientY)
const translated = translatePoint(m, chart.engine.scale, lineSeries.scale)现在translated变量包含系列坐标空间中的点击位置。请参阅下面的完整代码片段，您可以在其中拖动系列区域，并在停止拖动时将标记放置到拖动的开始和结束位置。const { lightningChart, SolidLine, SolidFill, ColorRGBA, AxisTickStrategies, UIOrigins, DataPatterns, translatePoint, ColorHEX} = lcjsconst 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({ dataPattern: DataPatterns.horizontalProgressive })const lineSeries2 = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })lineSeries2.add(diesel.map((point) => ({ x: point.x, y: point.y })))lineSeries.add(gasoline.map((point) => ({ x: point.x, y: point.y })))const markerA = chart.addChartMarkerXY() .setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#f00'))))) .setMouseInteractions(false)const markerB = chart.addChartMarkerXY() .setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#0f0'))))) .setMouseInteractions(false)function getClickInSeriesScale(point, scale) { const m = chart.engine.clientLocation2Engine(point.x, point.y) return translatePoint(m, chart.engine.scale, scale)}chart.onSeriesBackgroundMouseDragStop((obj, ev, b, start) => { let pointA = getClickInSeriesScale(start, lineSeries.scale) let pointB = getClickInSeriesScale({x:ev.clientX,y:ev.clientY}, lineSeries.scale) // move markes to start and end points markerA.setPosition(pointA) markerB.setPosition(pointB)})<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>