javascript – jquery flot：显示所有数据和Y轴悬停

问候
我是一个 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
            });
    }

问候

解决方法

我从FLOT网站上采用了turn-series.html的示例并进行了一些更改.将以下内容复制并粘贴到新的HTML文件中并运行它 – 在Firefox中运行,未在IE中测试.

<html>
 <head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if 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 { font-size:8pt; } </style>
 </head>
    <body>
    <h1>Flot Examples</h1>

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

    <p>Here is an example with real data: military budgets for
        varIoUs countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>


<script id="source" language="javascript" type="text/javascript">
$(function () {
    var datasets = {
        "usa": {
            label: "USA",data: [[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]]
        },"russia": {
            label: "Russia",218000],203000],171000],42500],37600],36600],21700],19200],21300],13600],14000],19100],23600],25100],26100],31100],34700]]
        },"uk": {
            label: "UK",62982],62027],60696],62348],58560],56393],54579],50818],50554],48276],47691],47529],47778],48760],50949],57452],60234],60076],59213]]
        },"germany": {
            label: "Germany",55627],55475],58464],55134],52436],47139],43962],43238],42395],40854],40993],41822],41147],40474],40604],40044],38816],38060],36984]]
        },};


    // define an empty array
    var data = [];

    // use this existing loop...
    var i = 0;
    $.each(datasets,function(key,val) {
       val.color = i;
       ++i;

       // ... and add this line - so the data array is populated (row by row)
        data.push(datasets[key]);
    });

    // plot the graph with the newly populated data array
    $.plot($("#placeholder"),{
                yaxis: { min: 0 },xaxis: { tickDecimals: 0 },grid: { hoverable: true,clickable: true },points: { show: true },lines: { show: true },});


    // add some hovering logic to each point...
     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;            
            }

    });

    // show the tooltip
    function showTooltip(x,y,contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',display: 'none',top: y - 35,left: x + 5,border: '1px solid #fdd',padding: '2px','background-color': '#fee',opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

});
</script>

</body>
</html>

javascript – jquery flot：显示所有数据和Y轴悬停

解决方法

猜你在找的jQuery相关文章