Question

我正在尝试将工具提示添加到我的flotcharts区域和线图，这些图形将显示Y轴上的所有结果。此外，它将显示cloest Y轴的工具提示，鼠标不需要完全是点。例如，看看morris.js。最后，我希望能够在同一页example

上触发多个图表

这是我的情节（）

的一个例子

$.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：

我正在尝试将工具提示添加到我的flotcharts区域和线图，这些线图将显示Y轴上的所有结果

问题2：

此外，它将显示最小Y轴的工具提示，鼠标不需要精确到整个点。例如，看看morris.js。

问题3：

最后，我希望能够在同一页面示例
上为多个图表触发此操作

我将回答问题2，因为一旦你回答了问题2，其他人就会很容易理解。

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

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

问题3：通过在另一个图上调用此函数，可以很容易地完成多个图形。你必须稍微修改一下这个功能才能让它起作用，但原理是一样的。

绘图图表工具提示匹配Y轴

1 个答案: