flot图插件使用

<div id="budget-charts"></div>

<script src="../../../plugins/ace/js/flot/jquery.flot.min.js"></script>
<!--<script src="../../../plugins/ace/js/flot/jquery.flot.pie.min.js"></script>-->
<script src="../../../plugins/ace/js/flot/jquery.flot.resize.min.js"></script>

bars: {
    align: "center",
    barWidth: 0.5
},对x轴文字剧中

<script>
    //    收支表
    $(function(){
        //数据
        var d1 = [[1, 4],[4, 1.5],[7,3.8],[10,2.8],[13,5.9],[16,2.3],[19,4.8]];
        var d2 = [ [2, 3],[5, 4.8],[8, 2.8],[11,4.7],[14,3.2],[17,3.7],[20,1.5]];

        //定义样式
        var sales_charts = $('#budget-charts').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                steps: { show: true },
                bars: { show: true, },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[1,''],[2,'5月2日'],[3,''],[4,''],[5,'5月3日'],[6,''],[7,''],[8,'5月4日'],[9,''],[10,''],[11,'5月5日'],[12,''],[13,''],[14,'5月6日'],[15,''],[16,''],[17,'5月7日'],[18,''],[19,''],[20,'5月8日']],
                tickLength: 0,
            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 7,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,

                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#budget-charts", [
                { label: "收入（元）", data: d1,color: "#488c13" },
                { label: "支出（元）", data: d2,color: "#ff9500"}
            ],options
        );

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

        var previousPoint = null;
        // 绑定提示事件
        $("#budget-charts").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
    //    财务盈利表
    $(function(){
        //数据
        var d1 = [[1, 4],[5, 3.8],[9,2.7],[13,2.8],[17,3]];
        var d2 = [[2, 3],[6, 4.9],[10, 1.4],[14,4.7],[18,3.5]];
        var d3 = [[3, 5],[7, 1.9],[11,3.5],[15,4.7],[19,1]];

        //定义样式
        var sales_charts = $('#profit-charts').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                steps: { show: true },
                bars: { show: true, },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[1,''],[2.5,'5月2日'],[3,''],[4,''],[5.5,''],[6.5,'5月3日'],[7,''],[8,''],[9,''],[10.5,'5月4日'],[11,''],[12,''],[13,''],[14.5,'5月5日'],[18.5,'5月6日']],
                tickLength: 0,
            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 7,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,

                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#profit-charts", [
                    { label: "收入（元）", data: d1,color: "#488c13" },
                    { label: "支出（元）", data: d2,color: "#ff9500"},
                    { label: "增值服务（元）", data: d3,color: "#0f90da"}
                ],options
        );

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

        var previousPoint = null;
        // 绑定提示事件
        $("#profit-charts").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
    //    充值表
    $(function(){
        //数据
        var d1 = [ [0,1],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ];

        //定义样式
        var sales_charts = $('#sales-charts1').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                lines: { show: true },
                points: { show: true },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
                tickLength: 0,

            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 6,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,
                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#sales-charts1", [ { label: "", data: d1,color: "#ee7951" } ],options);

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

        var previousPoint = null;
        // 绑定提示事件
        $("#sales-charts1").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
    //    提现表
    $(function(){
        //数据
        var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ];

        //定义样式
        var sales_charts = $('#sales-charts2').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                lines: { show: true },
                points: { show: true },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
                tickLength: 0,

            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 6,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,
                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#sales-charts2", [ { label: "", data: d1,color: "#ee7951" } ],options);

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

        var previousPoint = null;
        // 绑定提示事件
        $("#sales-charts2").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
    //    任务收益表
    $(function(){
        //数据
        var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ];

        //定义样式
        var sales_charts = $('#sales-charts3').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                lines: { show: true },
                points: { show: true },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
                tickLength: 0,

            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 6,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,
                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#sales-charts3", [ { label: "", data: d1,color: "#ee7951" } ],options);

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

        var previousPoint = null;
        // 绑定提示事件
        $("#sales-charts3").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
    //    增值收益表
    $(function(){
        //数据
        var d1 = [ [0, 0],[1, 0.1], [2, 0.5], [3, 1], [4, 1.1], [5, 1.2], [6, 1.3], [7, 1.5] ];

        //定义样式
        var sales_charts = $('#sales-charts4').css({'width':'100%' , 'height':'220px'});
        var options =  {

            hoverable: true,
            shadowSize: 0,
            series: {
                //lins 表示直线，参数 steps:true 表示梯形图，bars 表示直方图，points 表示点状图
                lines: { show: true },
                points: { show: true },
                // 设置阴影的大小，0消除阴影
                shadowSize: 5,
                // 鼠标悬停时的颜色
                highlightColor: { color: [ "red", "red" ] }

            },
            //横坐标的样式
            xaxis: {

                //指定固定的显示内容
                ticks: [[0,'0'],[1,'1'],[2,'2'],[3,'3'],[4,'4'],[5,'5'],[6,'6'],[7,'7']],
                tickLength: 0,

            },
            //竖坐标的样式
            yaxis: {

                //指定固定的显示内容
                ticks: [[0,'-1.5'],[1,'-1.1'],[2,'-0.1'],[3,'0'],[4,'0.5'],[5,'1.0'],[6,'1.5']],
                //数轴最小值
                min: 0,
                //数轴最大值
                max: 6,
                tickDecimals: 5

            },
            grid: {
                // 是否显示格子
                show: true,
                backgroundColor: { colors: [ "#fff", "#fff" ] },
                borderWidth: 1,
                borderColor:'#CCC',
                clickable: true,
                hoverable: true,
            }};
        $.plot("#sales-charts4", [ { label: "", data: d1,color: "#ee7951" } ],options);

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

        var previousPoint = null;
        // 绑定提示事件
        $("#sales-charts4").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed(0);

                    var tip = "展现量：";
                    showTooltip(item.pageX, item.pageY,tip+y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    })
</script>