6

问候我是一个 jquery 新手，并试图解决一个使用官方flot示例中的“turning-series.html”版本的问题，1-我想知道如何从选择的显示中切换它以显示我的数据集中的所有内容。2-如何更改我的选项，以便当鼠标悬停在该点上时，它会显示 Y 轴的值？

//My data instance:
var datasets = {
        "1st input": {
            label: "1st input",
            data: [
            [1.250208e+12, 1339],   
            [1.2502944e+12, 1316],      
            [1.2503808e+12, 1379],
            [1.2504672e+12, 1223],
             ]
        },
        "2nd input": {
            label: "2nd input",
            data: [
            [1.2503808e+12, 1324],

            ]
        },
    };


//old one, instead of displaying the selected ones from choiceContainer, I want to display all.
    function showWhole() {
        var data = [];
        choiceContainer.find("option:selected").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: {},
                xaxis: { mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true
            });
    }

问候

4

1 回答 1

17

我从 FLOT 网站上拿了 turn-series.html 的例子，做了一些修改。将以下内容复制并粘贴到新的 HTML 文件中并运行它 - 在 Firefox 中有效，未在 IE 中测试。

<html>
 <头部>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot 示例</title>
    <link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"></link>
    <!--[如果 IE]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.pack.js"></script ><![endif]-->
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
    <style> #tooltip { 字体大小：8pt; } </style>
 </head>
    <正文>
    <h1>Flot 示例</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>

    <p>这里有一个真实数据的例子：军事预算
        各国以恒定（2005 年）百万美元计算（来源：<a href="http://www.sipri.org/">SIPRI</a>）。</p>


<script id="source" language="javascript" type="text/javascript">
$（函数（）{
    var 数据集 = {
        “美国”： {
            标签：“美国”，
            数据：[[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382] , [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [ 2004, 480451], [2005, 504638], [2006, 528692]]
        },        
        “俄罗斯”： {
            标签：“俄罗斯”，
            数据：[[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200] , [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [ 2005, 31100], [2006, 34700]]
        },
        “英国”： {
            标签：“英国”，
            数据：[[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818] , [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [ 2004, 60234], [2005, 60076], [2006, 59213]]
        },
        “德国”： {
            标签：“德国”，
            数据：[[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238] , [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [ 2004, 38816], [2005, 38060], [2006, 36984]]
        },
    };


    // 定义一个空数组
    变量数据 = [];

    // 使用这个现有的循环...
    变量 i = 0;
    $.each（数据集，函数（键，val）{
       val.color = i;
       ++i;

       // ... 并添加这一行 - 所以数据数组被填充（逐行）
        data.push(数据集[键]);
    });

    // 用新填充的数据数组绘制图形
    $.plot($("#placeholder"), 数据, {
                y轴：{分钟：0}，
                xaxis：{tickDecimals：0}，
                网格：{可悬停：真，可点击：真}，
                点：{显示：真}，
                行：{显示：真}，
            });


    // 为每个点添加一些悬停逻辑...
     var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

            如果（项目）{
                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);
                }
            }
            别的 {
                $("#tooltip").remove();
                上一个点 = null;            
            }

    });

    // 显示工具提示
    功能显示工具提示（x，y，内容）{
        $('<div id="tooltip">' + 内容 + '</div>').css( {
            位置：'绝对'，
            显示：'无'，
            顶部：y - 35，
            左：x + 5，
            边框：'1px 实心#fdd'，
            填充：'2px'，
            '背景颜色'：'#fee'，
            不透明度：0.80
        }).appendTo("body").fadeIn(200);
    }

});
</脚本>

</正文>
</html>
于 2009-08-17T13:51:57.290 回答