2

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

<h1>Times and Distances</h1>

<pre>
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 
</pre>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script id="source" language="javascript" type="text/javascript">
$(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) {
    $('<div id="tooltip">' + contents + '</div>').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);
    }
});
</script>
4

2 回答 2

1

我很确定你对第三个 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');
于 2010-09-29T19:31:24.660 回答
1

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

通常，Flot 中处理数据点的各种接口要么接受一个 xaxis/yaxis 参数来指定使用哪个轴号（从 1 开始），要么让您直接将坐标指定为 x2/x3/... 或 x2axis/x3axis /... 而不是“x”或“xaxis”。

于 2013-04-16T00:49:43.573 回答