代码之家  ›  专栏  ›  技术社区  ›  kender

如何在Flot图形中显示包含数据点数据的弹出窗口?

  •  2
  • kender  · 技术社区  · 15 年前

    我得到了弗洛特创建的图表。我想要完成的是在用户将鼠标移到上面时获得某种信息——最好是在某种javascript弹出窗口中显示数据(从x轴和y轴)。

    这可能是一个微不足道的问题,但我想不出来。。。

    <script  id="source" language="javascript" type="text/javascript">
    $(function () {
        var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
        $.plot($("#graph_placeholder"), [ data ], { 
            xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
            lines: { show: true },
            points: { show: false },
        } );
    });
    </script>
    

    所以最好的办法就是拿到 x: 1251756000000 y: 122.68 任何 ).甚至有 x 按中定义的格式设置的值 timeformat ( 2009/11/14 ).

    1 回复  |  直到 15 年前
        1
  •  5
  •   Derek Kurth    15 年前

    This example 显示如何启用工具提示(如果单击“启用工具提示”复选框)。下面是使用示例代码的起点:

    <script  id="source" language="javascript" type="text/javascript">
    $(function () {
    var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
    $.plot($("#graph_placeholder"), [ data ], {
        xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true },
    } );
    });
    
    var previousPoint = null;
    $("#graph_placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;
            $("#tooltip").remove();
            showTooltip(item.pageX, item.pageY, '(' + item.datapoint[0] + ', ' + item.datapoint[1]+')');
        }
    } 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>