英文:
Plotly.kt Shows Image in Tooltip Hover
问题
我正在在 Kotlin/JS 应用中使用 Plotly.kt，当悬停在图表上的数据点时，我想显示图像、视频和另一个图表。根据这里，可以通过设置hoverinfo = none来禁用默认的悬停效果。然而，我没有找到监听hover事件的方法。有人能帮忙吗？
英文:
I am using Plotly.kt in a Kotlin/JS application and I want to show image, video and another chart when hovering on a data point on the graph. According to this, it is possible to disable the default hover by setting hoverinfo = none. However, I did not find a way to listen to the hover event. Could anyone help on this?
答案1
得分: 0
The plot div对象在PlotlyJS中实现了.on()方法，用于处理PlotlyJS事件，该方法在这里进行了讨论。然而，在Plotly.kt中没有包装.on()方法。因此，一个临时解决方案是将plotDiv视为动态对象，以便可以在不编译错误的情况下使用.on()方法。或者，使用js()函数直接运行JavaScript代码。
以下内容改编自此官方示例。
private fun drawDeserialization(element: HTMLElement): Unit {
val plot = Plotly.plot {
scatter {
x(1, 2, 3, 4)
y(10, 15, 13, 17)
mode = ScatterMode.markers
type = TraceType.scatter
hoverinfo = "none"
}
}
val serialized = plot.toJsonString()
val deserialized = Plot(Json.decodeFromString(MetaSerializer, serialized as String).toMutableMeta())
element.append.plotDiv(plot = deserialized)
// 选项1：获取plotDiv对象的动态引用
val pdiv: dynamic = element?.firstElementChild
pdiv.on("plotly_click") { event -> alert("Caught Hovering Event!") }
// 选项2：直接运行JavaScript代码
js("pdiv.on('plotly_click', function() {alert('Caught Hovering Event!');})")
}
英文:
The plot div object of PlotlyJS implements the .on() method for processing the PlotlyJS event, which is discussed in here. However, the .on() method is not wrapped in Plotly.kt. So, a temporary solution is to treat the plotDiv as dynamic, so that the .on() method can be used without compilation error. Or, use the js() function to run the Javascript code directly.
The following is adapted from this official example.
private fun drawDeserialization(element: HTMLElement): Unit {
val plot = Plotly.plot {
scatter {
x(1, 2, 3, 4)
y(10, 15, 13, 17)
mode = ScatterMode.markers
type = TraceType.scatter
hoverinfo = "none"
}
}
val serialized = plot.toJsonString()
val deserialized = Plot(Json.decodeFromString(MetaSerializer, serialized as String).toMutableMeta())
element.append.plotDiv(plot = deserialized)
// option 1: Get synamic reference to the plotDiv object
val pdiv: dynamic = element?.firstElementChild
pdiv.on("plotly_click") { event -> alert("Caught Hovering Event!") }
// option 2: Run the Javascript code directly
js("pdiv.on('plotly_click', function() {alert('Caught Hovering Event!');})")
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论