Question

我有一个plotly.js图，其中有多个子图，它们共享一个x轴，如https://plot.ly/javascript/subplots/#stacked-subplots-with-a-shared-x-axis

我试图将鼠标悬停在所有子图上，以便一次显示所有具有相同x值的点的值。

我试图通过在每个子图上调用Plotly.Fx.hover来解决这个问题，但它似乎只对最后一个调用它的子图有效。 http://codepen.io/john-soklaski/pen/adQwBa

我尝试的代码是：

Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 0}, "xy")
Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 1}, "xy2")

理想情况下，API可以在一次调用中执行此操作：

Plotly.Fx.hover('myDiv', [{xval: 2, curveNumber: 0, subplot: "xy"}, {xval: 2, curveNumber: 1, subplot: "xy2"}])

有关如何使其发挥作用的任何想法？

Answer 1

我发现此问题已过时，但已添加此功能：https://github.com/plotly/plotly.js/pull/301

Answer 2

Plotly.plot('myDiv', data, layout);
graph = document.getElementById('myDiv');
graph.on('plotly_hover', function(eventdata) {
    if (eventdata.xvals) {
        Plotly.Fx.hover(graph, {
            xval: eventdata.xvals[0]
        }, ['xy', 'x2y2', 'x3y3', 'x4y4']);
    }
});

对于多个子图，也添加轴标签数组。在这种情况下

[＆＃39; xy＆＃39;，＆＃39; x2y2＆＃39;，＆＃39; x3y3＆＃39;，＆＃39; x4y4＆＃39;]

通过这种方式，您可以获得div中子图的耦合悬停事件

Plotly.js悬停在多个子图上

2 个答案: