Rapha?l 编写的 Bar Chart

bar.js

$(function () {
    $("#data").css({
        position: "absolute",
        left: "-9999em",
        top: "-9999em"
    });
});
window.onload = function () {
    // Grab the data
    var labels = [],
        data = [];
    $("#data tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data tbody td").each(function () {
        data.push($(this).html());
    });

    // Draw
    var width = 800
        rightgutter = 20,
        height = 250,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 25,
        colorhue = .7 || Math.random(),
        color = "hsb(" + [colorhue, 1, .75] + ")",
        r = Raphael("holder", width, height),
        txt = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        txt1 = {"font": '9px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter - rightgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / data.length;
    r.path({stroke: "#036"}).moveTo(leftgutter, topgutter-20).lineTo(leftgutter, height-bottomgutter);
    r.path({stroke: "#036"}).moveTo(leftgutter, height-bottomgutter).lineTo(width, height-bottomgutter);
    var frame = r.rect(10, 10, 50, 20, 5).attr({fill: "#888", stroke: "#474747", "stroke-width": 2}).hide(),
        is_label_visible = false,
        leave_timer,
        blanket = r.set(),
            bar_label = r.text(60, 40, "22 September 2008").attr(txt1).hide(),
            t0 = r.text(leftgutter-14, height-25, 0).attr(txt).toBack();

    for(var i = 0, ii = labels.length; i < ii; i++)
        {
            var y = height - bottomgutter - data[i]/ max * (height - bottomgutter - topgutter),
          x = Math.round(leftgutter + X * (i+1)),
          ty = r.text(leftgutter - 14, topgutter + i * Y, Math.round(max/data.length*(ii-i))).attr(txt).toBack(),
          tx = r.text(x-30, height - 6, labels[i]).attr(txt).toBack(),
          bar = r.rect(x-50, y, X-20, data[i]/ max * (height - bottomgutter - topgutter)).attr({fill: color, stroke: color});

            blanket.push(r.rect(x-50, 20, X-20, height - bottomgutter - topgutter).attr({stroke: "#fff", fill: "#000", opacity: 0}));
      var rect = blanket[i];
      (function (x, y, data, label, bar) {
            var timer, i = 0;
            $(rect.node).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x-48, y: y-40};
                if (newcoord.y - 20 < 0) {
                    newcoord.y += 16;
                }
                bar.attr({opacity: .3});
                frame.show().animate({x: newcoord.x, y: newcoord.y}, 200 * is_label_visible);
               // bar_label.show();
                  bar_label.attr({text: label}).show().animate({x: newcoord.x + 25, y: newcoord.y + 10}, 200 * is_label_visible);
                bar_label.toFront();
                is_label_visible = true;
                r.safari();
            }, function () {
                    bar.attr({opacity: 1});
                r.safari();
                leave_timer = setTimeout(function () {
                    frame.hide();
                    bar_label.hide();
                    is_label_visible = false;
                    r.safari();
                }, 1);
            });
        })
            (x, y, data[i], labels[i], bar);
        }
};

bar.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>


        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Rapha?l ¡¤ Analytics</title>
       <script src="resources/raphael.js" type="text/javascript" charset="utf-8"></script>
        <script src="resources/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="resources/bar.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css" media="screen">
            #holder {
                height: 250px;
                width: 800px;
            }
        </style>
    </head><body>
        <table id="data">
            <tfoot>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>8</td>
                    <td>25</td>
                    <td>27</td>
                    <td>25</td>
                    <td>54</td>
                    <td>59</td>
                    <td>79</td>
                    <td>47</td>
                    <td>27</td>
                    <td>44</td>
                    </tr>
            </tbody>
        </table>
        <div id="holder"></div>
    </body></html>

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！