Flot Stack的例子

Flot Stack的例子，同时消除tick线，折腾了几个小时，才弄懂，记录一下

<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="/js/flot/jshashtable-2.1.js"></script>    
<script type="text/javascript" src="/js/flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.stack.js"></script><script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script>
//******* DNS Query Stacked Chart

$(document).ready(function () {
    $.plot($("#flot-placeholder2"), dataset2, options2);
    $("#flot-placeholder2").UseTooltip2();
});
//******* Stacked Horizontal Bar Chart
var data2_1 = [
    [100, 0]
];

var data2_2 = [
    [50, 0]
];

var data2_3 = [
    [200, 0]
];

var dataset2 = [
    { label: null, data: data2_1, color: "#0077FF" },
    { label:null, data: data2_2, color: "#7D0096" },
    { label: null, data: data2_3, color: "#FF0011" }
];

var options2 = {
    series: {
       lines: { show: false},
        stack: true,
        bars: {
            show: true
        }
    },
    bars: {
        lineWidth: 0,
        barWidth: 1,
        horizontal: true
    },
    xaxis: {
     
        axisLabel: "TESTTEST",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        tickFormatter: function (v, axis) {
            return $.formatNumber(v, { format: "#,###", locale: "us" });
        }
    },
    yaxis: {
        min: 0,      
        color: "black",
        axisLabel: "DNS Query Count",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3,
        show:false
        
    },
    grid: {
      
        tickColor:"#FFFFFF",
        hoverable: true,
        borderWidth: 0,
        backgroundColor: { colors: ["#EDF5FF", "#ffffff"] }
    }
};

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

var previousPoint = null, previousLabel = null;
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

$.fn.UseTooltip2 = function () {
    $(this).bind("plothover", function (event, pos, item) {
        if (item) {
            if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                previousPoint = item.dataIndex;
                previousLabel = item.series.label;
                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];

                var color = item.series.color;
                var day = "Jan " + new Date(y).getDate();

                showTooltip2(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + day
                         + " : <strong>" + $.formatNumber(x, { format: "#,###", locale: "us" }) +
                         "</strong>(Count)");
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};


function showTooltip2(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 60,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}</script>
<!-- HTML -->

<div id="flot-placeholder2" style="width:450px;height:200px;margin:0 auto"></div>