javascript - 图表工具提示匹配 Y 轴

Question

我正在尝试向我的图表区域和折线图添加工具提示，以显示该 Y 轴上的所有结果，此外，它还将显示最近的 Y 轴的工具提示，鼠标不需要完全覆盖观点。例如看 morris.js .最后，我希望能够针对同一页面上的多个图表触发此操作 example

这是我的 plot() 的一个例子

$.plot($("#placeholder"), data, {
                series: {
                    stack: true,
                    lines: { show: lines, fill: true, steps: steps },
                    bars: { show: bars, barWidth: 0.6 }
                }, yaxis: { min: 0}, xaxis: {mode: "time", timeformat: "%H:%M"},
                legend : { show: true, container : '#placeholder', noColumns: 9, margin: ['500px', 35]}
            });

提前谢谢你。

Answer 1

你在这里问了 3 个问题:

问题 1:

I am trying to add tooltips to my flotcharts area and line graphs that will display the results of all on that Y axis

问题 2:

Also that it will display the tooltip for the cloest Y axis the mouse does not need to be exactly overal the point. for example look at morris.js.

问题 3:

Lastly I would like to be able to trigger this for more then one graph on the same page example

我会回答问题 2，因为一旦您回答了问题 2，其他问题就会相当简单。

基本上，获得最近点所需要做的就是获得鼠标位置，并使用 flot 的 pointOffset 函数(参见 https://github.com/flot/flot/blob/master/API.md#plot-methods)将其与所有数据点的位置进行比较。如果鼠标和点之间的距离最短，请在工具提示中使用它。这是一个例子:http://jsfiddle.net/RUKvk/54/

问题 1:您需要稍微修改我的函数以存储一个点列表而不是一个点。如果距离在一定范围内，则将其添加到列表中。

问题 3:通过在另一个图上调用此函数，应该可以很容易地完成多个图。您必须稍微修改该函数才能使其正常工作，但原理是一样的。