Lightningchart 在鼠标悬停时获取轴值

我们如何得到X轴的值

---

如果您看到上图，如果将鼠标移到图表上或单击图表的任何位置，如何获得X轴值？是否有回调函数？

您可以将事件处理程序附加到事件

然后需要将事件位置转换为引擎坐标空间。这可以通过方法，

chart.engine.clientLocation2Engine（ev.clientX，ev.clientY）

最后一个步骤是将引擎位置转换为比例上的点。这可以通过函数来完成

const onScale=translatePoint（engineLocation，chart.engine.scale，{x:chart.getDefaultAxisX（）.scale，y:chart.getDefaultAxisY（）.scale}）

chartOHLC.onChartBackgroundMouseMove（（obj，ev）=>{
常量点=对象引擎客户端位置2引擎（ev.clientX，ev.clientY）
const onScale=translatePoint（点，obj.engine.scale，{x:obj.getDefaultAxisX（）.scale，y:obj.getDefaultAxisY（）.scale}）
console.log（在线）
})

请参阅下面的代码段，我将鼠标位置记录在控制台的刻度上

//从LightningChartJS中提取所需的部分。
常数{
光照图，
战略,，
LegendBoxBuilders，
固体填料，
实线，
空位线，
ColorRGBA，
原籍，
主题，
翻译点
}=lcjs
//从“xydata”-库导入数据生成器。
常数{
createOHLCGenerator，
createProgressiveTraceGenerator
}=xydata
//创建仪表板以容纳两个图表
const db=lightningChart（）.仪表板({
//主题：Themes.dark
行数：2，
列数：1
})
//确定日期时间轴的原点。
const dateOrigin=新日期（2018,0,1）
//包含OHLC蜡烛棒系列和布林带的图表
常量chartOHLC=db.createChartXY({
列索引：0，
行索引：0，
专栏跨度：1，
行跨度：1
})
//使用带有X轴自定义日期原点的日期时间策略。
沙特尔
.getDefaultAxisX（）
.战略(
Axis.DateTime，
（tickStrategy）=>tickStrategy.setDateOrigin（dateOrigin）
)
//修改图表。
沙特尔
.setTitle（“交易仪表板”）
//风格独裁者。
.setAutoCursor（光标=>{
cursor.disposeTickMarkerY（）
cursor.setGridStrokeYStyle（emptyLine）
})
.设置填充({
右：40
})
chartOHLC.onChartBackgroundMouseMove（（obj，ev）=>{
常量点=对象引擎客户端位置2引擎（ev.clientX，ev.clientY）
const onScale=平移点（点，obj.engine.scale{
x:obj.getDefaultAxisX（）.scale，
y:obj.getDefaultAxisY（）.scale
})
console.log（在线）
})
//顶部图表应分配66%的视图高度。通过将第一行的高度设置为2，相对
//行的高度变为整个视图的2/3（行高/列宽的默认值为1）
db.setRowHeight（0,2）
//为蜡烛棒和布林格乐队创建一个传奇盒
const legendBoxOHLC=chartOHLC.addLegendBox（LegendBoxBuilders.HorizontalLegendBox）
.设定位置({
x:100，
y:100
})
.setOrigin（UIOrigins.rightop）
//定义可以很好地设置Y轴间隔的函数。
让我们好好看看
//创建OHLC图形和面积范围。
//#区域
//获取系列的Y轴（手动设置视图）。
const stockAxisY=chartOHLC.getDefaultAxisY（）
.setScrollStrategy（未定义）
.setTitle（美元）
//添加系列。
constAreaRangeFill=new SolidFill（）.setColor（ColorRGBA（1001492372350））
const AreaRangeStrope=新实线（）
.setFillStyle（新的SolidFill（）.setColor（ColorRGBA（100149237）））
.设置厚度（1）
const areaRange=chartOHLC.AddAreaRange系列({
亚克斯：斯托克斯
})
.setName（'Bollinger band'）
.setHighFillStyle（区域范围填充）
.setLowFillStyle（区域范围填充）
.setHighStrokeStyle（范围行程）
.setLowStrokeStyle（区域范围冲程）
.setMouseInteractions（错误）
.setCursorEnabled（错误）
常数stockFigureWidth=5.0
const borderBlack=new SolidLine（）.setFillStyle（new SolidFill（）.setColor（ColorRGBA（0,0,0）））.setThickness（1.0）
const fillBrightRed=new SolidFill（）.setColor（ColorRGBA（255,0,0））
const fillDimRed=new SolidFill（）.setColor（ColorRGBA（128,0,0））
const fillBrightGreen=new SolidFill（）.setColor（ColorRGBA（0，255，0））
const fillDimGreen=new SolidFill（）.setColor（ColorRGBA（0，128，0））
const stock=chartOHLC.addOhlc系列({
亚克斯：斯托克斯
})
.setName（“蜡烛棒”）
//设置图形宽度
.setFigureWidth（stockFigureWidth）
//造型正面烛台
.setPositiveStyle（烛台=>烛台
//烛台主体填充样式
.setBodyFillStyle（填充亮绿色）
//烛台主体填充样式
.setBodyStrokeStyle（黑色边框）
//烛台笔画风格
.setStrokeStyle（（strokeStyle）=>strokeStyle.setFillStyle（fillDimGreen））
)
.setNegativeStyle（烛台=>烛台
.setBodyFillStyle（填充亮红色）
.setBodyStrokeStyle（黑色边框）
.setStrokeStyle（（strokeStyle）=>strokeStyle.setFillStyle（fillDimRed））
)
//生成处理向系列添加OHLC段的函数。
常量添加=（ohlc）=>{
//ohlc等于[x，开，高，低，关]
库存增加（ohlc）
//AreaRange如果比实际OHLC值延伸一点，看起来会更好。
const Area Offset=0.2
areaRange.add({
职位：ohlc[0]，
高：ohlc[2]-区域偏移，
低：ohlc[3]+区域偏移，
})
}
//生成一些静态数据。
createOHLCGenerator（）
.设定值（100）
.setDataFrequency（24*60*60*1000）
.generate（）
.toPromise（）
。然后（数据=>{
data.forEach（添加）
setViewName（）
})
//#端区
//创建卷。
//#区域
const chartVolume=db.createChartXY({
列索引：0，
行索引：1，
专栏跨度：1，
行跨度：1
})
//使用带有X轴自定义日期原点的日期时间策略。
图表卷
.getDefaultAxisX（）
.战略(
Axis.DateTime，
（tickStrategy）=>tickStrategy.setDateOrigin（dateOrigin）
)
//修改图表。
图表卷
.setTitle（“卷”）
.设置填充({
右：40
})
/