Raphael js条形图为X和Y轴添加标签

时间:2014-01-10 11:18:43

标签: javascript jquery raphael graphael

这是迄今为止我在stackoverflow答案的帮助下得到的。 我能够在条形图上向条形图添加描述,但现在正在努力将标签和比例放在Y轴上。

window.onload = function ()
{
    var r = Raphael("diagram"),
    data3 = [25, 20, 13, 32, 15, 5, 6, 10],
    txtattr = { font: "24px 'Allerta Stencil', sans-serif", fill: "rgb(105, 136, 39)" };
    r.text(250, 10, "Sample Chart").attr(txtattr);
    var bc = r.barchart(10, 10, 500, 400, data3,
    {
        stacked: false,
        type: "sharp"
    });
    bc.attr({ fill: "#2f69bf" });
    var x = 1;

    labelBarChart(r, bc,
             ['abc', 'b', 'card', 'd', 'elph', 'fun', 'gurr', 'ha'],
             { fill: "#2f69bf", font: "16px sans-serif" }
    );
};

function labelBarChart(r, bc, labels, attrs)
{
    for (var i = 0; i < bc.bars.length; i++)
    {
        var bar = bc.bars[i];
        var gutterY = bar.w * 0.4;
        var labelX = bar.x;
        var labelY = bar.y + bar.h + gutterY;
        var labelText = labels[i];
        var labelAttr = { fill: "#2f69bf", font: "16px sans-serif" };
        r.text(labelX, labelY, labelText).attr(labelAttr);
    }
}

我希望图表看起来像Y轴上的描述和单位,不需要像浮雕效果等任何花哨的东西。

Sample

0 个答案:

没有答案
相关问题