头像

flot.js完美演示柱状图折线图和饼状图

来源:http://www.sucaihuo.com/js/879.html 素材火管理员 2016-06-28 21:51浏览(1606) 收藏

flot.js是一款我看过最漂亮的统计报表图,鼠标悬浮在点上会显示自定义数据。本文演示了flot.js柱状图,折线图和饼图。
flot.js完美演示柱状图折线图和饼状图
分类:统计图 > 柱状图 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 8 下载资源 下载积分: 106 积分

flot.js折线图

$(function() {
    var data = [{
            "label": "",
            data: [[1, 7.5], [2, 7.5], [3, 5.7], [4, 8.9], [5, 10], [6, 7], [7, 9], [8, 13], [9, 7], [10, 6]],
            points: {show: true, radius: 4, lineWidth: 3, fillColor: 'rgba(18,147,204,0.3)'},
            lines: {show: true, lineWidth: 0, fill: 0.5, fillColor: 'rgba(18,147,204,0.3)'},
            color: '#fff',
            grid: {hoverable: true, clickable: true, borderWidth: 0, color: '#ccc'},
        }];
    var options = {
        lines: {
            show: true,
        },
        points: {
            show: true
        },
        xaxis: {
            tickDecimals: 0,
            tickSize: 1
        },
        grid: {hoverable: true, borderWidth: 1, borderColor: '#ccc'}// 开启 hoverable 事件  
    };
    $.plot($("#placeholder"), data, options);
    // 节点提示  
    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #000",
        padding: "3px 8px",
        "background-color": "#000",
        opacity: 0.80,
        color: "#FFF",
        "border-radius": "4px",
        "font-size": "12px"
    }).appendTo("body");

    $("#placeholder").bind("plothover", function(event, pos, item) {
        if (item) {
            var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
            $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                    .css({top: item.pageY - 38, left: item.pageX - 0})
                    .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });
});

flot.js柱状图

function getPlotStatics(obj) {
    var datas = obj.attr("data-datas");
    if (datas == '') {
        return false;
    }
    var data = eval("(" + datas + ")");

    var options = {
        lines: {
            show: true,
        },
        points: {
            show: true
        },
        xaxis: {
            mode: "categories",
            //            tickLength: 2
        },
        colors: ["#7cb5ec", "#7cb5ec"],
        legend: {
            show: false, //设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)
        },
        grid: {hoverable: true, borderWidth: 1, borderColor: '#ccc', }// 开启 hoverable 事件  
    };
    $.plot(obj, data, options);
    obj.bind("plothover", function(event, pos, item) {
        if (item) {
            var unit = obj.attr("data-unit") ? obj.attr("data-unit") + " " : "";

            var x = item.datapoint[0].toFixed(2), y = unit + item.datapoint[1].toFixed(2);
            //$("#tooltip").html(item.series.label + " of " + x + " = " + y)
            $("#tooltip").html(y)
                    .css({top: item.pageY - 38, left: item.pageX - 0})
                    .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });
}
jQuery(function($) {
    if ($('.graphs_init').length > 0) {
        $('.graphs_init').each(function() {
            getPlotStatics($(this));
        })
    }
})
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/879.html
评论18
头像

友情提示:垃圾评论一律封号...

  • 头像 17楼
    02-23 04:28
    k134563
    学习一下这个~~~
  • 头像 16楼
    12-12 16:30
    112233
    这个不错!!
  • 头像 15楼
    12-09 16:43
    liyn2007
    学习一下这个效果
  • 头像 14楼
    11-14 15:02
    Andy彬
    气死我了
  • 头像 13楼
    11-05 22:09
    神奇三水州
    这个不错!!!!!!!!!
  • 头像 12楼
    11-01 08:17
    miuqi002
    这个不错!!!!!!!!!!
  • 头像 11楼
    10-23 02:32
    harrylee
    PHP仿微信多图片预览上传
  • 头像 10楼
    10-09 09:08
    133445
    玩么取消图
  • 头像 9楼
    09-01 09:55
    dlboy
    正好找这个,用一下
  • 头像 8楼
    08-24 09:27
    mali1711
    这个很难吗?没发现,还要这么多积分
1 2