English | 正體中文 | 简体中文

提示框图表

折线和直条图

范例程式码Expand
<!-- HTML -->
<div id="example-section27">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var data9_1 = [
    [1, 1530], [2, 6580], [3, 1980],[4, 6630], [5, 8010], [6, 10800],
    [7, 3530], [8, 7490], [9, 5230],[10, 2580], [11, 6880], [12, 3640]
];

var previousPoint = null;

$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {                         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                
                var x = item.datapoint[0];
                var y = item.datapoint[1];                

                console.log(x+","+y)

                showTooltip(item.pageX, item.pageY,
                  months[x-  1] + "<br/>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        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 + 20,
        border: '2px solid #4572A7',
        padding: '2px',     
        size: '10',   
        'border-radius': '6px 6px 6px 6px',
        'background-color': '#fff',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var plot;

$(function () {        
    plot = $.plot($("#example-section27 #flotcontainer"),
        [{
              data: data9_1,label: "Page View",lines: { show: true},points: { show: true }
            }
        ],{            
            grid: {
                hoverable: true, 
                clickable: false, 
                //mouseActiveRadius: 30,
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis:{
                   ticks: [
                            [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"],
                            [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]
                   ]
            }     
        }
    );

    $("#example-section27 #flotcontainer").UseTooltip();
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact