带有文字x轴的graphael条形图

Question

我想知道如何制作一个简单的条形图,可能有一天作为x轴,值为'今天'和'昨天',而y轴可能是'时间',相应的值为'1'和'2 ".我想我很困惑,如何设置文本为x轴的值,如何显示Y轴,究竟rgaxis呢...(我发现使用一个例子axis = r.g.axis(0,300,400,0,500,8,2),我只知道这是xpos,ypos,width,??,?? num ticks,??).任何见解都会很棒!或者包含功能更全面的条形图示例(标签等)的页面.谢谢.

Answer 1

为了所有那些谷歌搜索:

r.g.axis(x_start, y_start, x_width, from, to, steps, orientation, labels, type, dashsize)

x_start和y_start:轴文本与 左下角的距离

x_width:文本末尾沿x轴的位置

from和to:用于指定和范围使用而不是使用labels参数

步骤:是刻度数 - 1

orientation:似乎指定x轴与y轴

type:是使用的刻度线的类型.

这一切都是从源代码中推断出来的.我想我现在将切换到带有文档的图表库......

Answer 2

当前的代码(Raphaeljs 2.0)已经改变,并且必须略微适应使用Raphael.g.axis而不是rgaxis:

Raphael.g.axis(85,230,310,null,null,4,2,["今天","昨天","明天","未来"],"|",0,r)

Answer 3

你走在正确的轨道上.您使用g.axis,设置文本的位置参数可以在'text'arg(位置)中找到,也可以使用'orientation'args切换y.我在这里添加了一个例子,

条形图与文字x轴

希望能帮助到你.

Answer 4

阅读这个问答和十几个喜欢它,我仍然无法让gRaphaël显示条形图的正确标签.食谱似乎都是指旧版本的库,或者是不再存在的github页面.gRaphaël产生了一些很棒的输出 - 但它的文档还有很多不足之处.

但是,我能够使用Firebug和Inspect This Element的组合来跟踪代码并查看它产生的内容.潜入条形图对象,所需的几何图形就在那里.为了拯救他人的挫败感,这就是我解决问题的方法:

<script>

function labelBarChart(r, bc, labels, attrs) {
    // Label a bar chart bc that is part of a Raphael object r
    // Labels is an array of strings. Attrs is a dictionary
    // that provides attributes such as fill (text color)
    // and font (text font, font-size, font-weight, etc) for the
    // label text.

    for (var i = 0; i<bc.bars.length; i++) {
        var bar = bc.bars[i];
        var gutter_y = bar.w * 0.4;
        var label_x = bar.x
        var label_y = bar.y + bar.h + gutter_y;
        var label_text = labels[i];
        var label_attr = { fill:  "#2f69bf", font: "16px sans-serif" };

        r.text(label_x, label_y, label_text).attr(label_attr);
    }

}


// what follows is just setting up a bar chart and calling for labels
// to be applied

window.onload = function () {
    var r = Raphael("holder"),
        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, "A Gratuitous Chart").attr(txtattr);
    var bc = r.barchart(10, 10, 500, 400, data3, {
            stacked: false,
            type: "soft"});
    bc.attr({fill: "#2f69bf"});
    var x = 1;

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

};
</script>
<div id="holder"></div>

你可以做一些小清理labelBarChart()工作,但这基本上可以完成工作.