Flot – 是否可以拥有第三个y轴或隐藏数据集?

我有一个图表显示人们的比赛次数(如果您将下面的代码复制/粘贴到任何flot示例中它应该工作)。 我在y1轴上显示时间,在y2轴上显示每km的速度,因为它们都是%H /%M /%S的倍数。 但我还想在图表中显示每个种族的距离。 由于此数据集上的单位(距离)与y轴不同,因此通过y轴显示它是没有意义的。 我想我可以将距离细节添加到x轴刻度字符串,但这不允许我稍后在工具提示中重用数据。 关于如何从工具提示访问数据集“距离”,或以某种方式将第三个y轴刻度推到图表上,有没有任何想法?

Times and Distances

 Event Distance Time Pace Km R1 4 Mile 00:23:14 R2 5 Mile 00:28:27 R3 5 Mile 00:29:08 R4 4 Mile 00:21:16 R5 5 KM 00:16:42 R6 5 Mile 00:25:41 00:03:12 R7 5 KM 00:16:03 00:03:13 R8 5 Mile 00:28:13 00:03:30 

$(function () { var d1 = [ { label: "Time", lines: {show: true, fill: false}, points: {show: true, fill: false}, data: [ [0,600000],[1,1200000],[2,1800000],[3,1800000],[4,2400000],[5,3600000],[6,4800000],[7,5200000] ] }, { label: "Pace per Km", yaxis: 2, lines: {show: true, fill: false}, points: {show: true, fill: false}, data: [ [0,3000],[1,2800],[2,3000],[3,3000],[4,2500],[5,3000],[6,2500],[7,3000] ] } //, //{ // label: "Distance", // yaxis: 2, // bars: {show: true}, // data: [ [0,3],[1,2.8],[2,3],[3,3],[4,2.5],[5,3],[6,2.5],[7,3] ] //} ]; $.plot($("#placeholder"), d1, { xaxis: { ticks: [ [0,'R1'],[1,'R2'],[2,'R3'],[3,'R4'],[4,'R5'],[5,'R6'],[6,'R7'],[7,'R8'] ] }, yaxis:{ mode: "time", min: 500000, max: 6000000, timeformat: "%H:%M:%S" }, y2axis:{ mode: "time", min: 2000, max: 4000, timeformat: "%M:%S" }, selection: { mode: "xy" }, grid: { hoverable: true, clickable: true } }); var previousPoint = null; $("#placeholder").bind("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(2)); $("#y").text(pos.y.toFixed(2)); if (item) { if (previousPoint != item.datapoint) { previousPoint = item.datapoint; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y); } } else { $("#tooltip").remove(); previousPoint = null; } }); function showTooltip(x, y, contents) { $('

' + contents + '

').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #fdd', padding: '2px', 'background-color': '#fee', opacity: 0.80 }).appendTo("body").fadeIn(200); } });

我很确定你对第3个y轴运气不好。

在这种情况下我通常做的只是有一个全局数组,它将x坐标映射到你想要在工具提示中显示的任何数据,所以想象一下:

 var y3data = [3,2.8,3,3,2.5,...];//y-values from your Distance series 

然后在你的plothover函数中,你对showTooltip的调用变为:

 showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y + ' and the race was '+y3data[x]+'km long'); 

我还没有亲自尝试,但它似乎在文档中得到支持。 它没有在任何地方指定限制,它说:

通常,Flot中处理数据点的各种接口要么接受xaxis / yaxis参数来指定要使用的轴编号(从1开始),要么直接将坐标指定为x2 / x3 / …或x2axis / x3axis / …而不是“x”或“xaxis”。