Question

我想知道如何制作一个简单的条形图，可能有一天作为x轴，值为'今天'和'昨天'，而y轴可能是'时间'，相应的值为'1'和'2'。我想我很困惑如何将文本设置为x轴的值，如何显示y轴，以及r.g.axis究竟是什么... （我找到了使用axis = r.g.axis(0,300,400,0,500,8,2)的示例，我只知道它是xpos，ypos，width，??，?? num ticks，{{1 }}）。任何见解都会很棒！或者包含功能更全面的条形图示例（标签等）的页面。感谢。

Answer 1

为了所有用Google搜索的人：

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

x_start 和 y_start ：轴文字距离左下角的距离

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

从和到：用于指定和使用范围而不是使用labels参数

步骤：是刻度数 - 1

方向：似乎指定x轴与y轴

类型：是使用的刻度线的类型。

这一切都是从source code推断出来的。我想我现在将切换到带有文档的图表库......

Answer 2

目前的代码（Raphaeljs 2.0）已经改变，必须略微适应使用Raphael.g.axis而不是r.g.axis：

Raphael.g.axis（85,230,310，null，null，4,2，[“今天”，“昨天”， “明天”，“未来”]，“|”，0，r）

Answer 3

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

Barchart with text x-axis

希望它有所帮助。

Answer 4

阅读这个Q＆amp; A和十几个喜欢它，我仍然无法让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()进行一些小清理工作，但这基本上可以完成工作。

Answer 5

这是我为添加标签而编写的函数。它不是特别优雅，但它会添加标签：

Raphael.fn.labelBarChart = function(x_start, y_start, width, labels, textAttr) {
  var paper = this;

  // offset width and x_start for bar chart gutters
  x_start += 10;
  width -= 20;

  var labelWidth = width / labels.length;

  // offset x_start to center under each column
  x_start += labelWidth / 2;

  for ( var i = 0, len = labels.length; i < len; i++ ) {
    paper.text( x_start + ( i * labelWidth ), y_start, labels[i] ).attr( textAttr );
  }
};

用法如下：

var paper = Raphael(0, 0, 600, 400);
var chart = paper.barchart(0, 0, 600, 380, [[63, 86, 26, 15, 36, 62, 18, 78]]);

var labels = ['Col 1', 'Col 2', 'Col 3', 'Col 4', 'Col 5', 'Col 6', 'Col 7', 'Col 8'];
paper.labelBarChart(0, 390, 600, labels, {'font-size': 14});

Answer 6

当我试图理解Raphaël的工作方式时，我想提出一个Jonathan Eunice提出的labelBarChart函数问题的解决方案。考虑到堆叠条形图（或其他具有多个值数组的条形图），我在bc.bars [0]上添加了一个测试，以防bc.bars.length表示堆叠值的数组数。

这导致代码：

<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.
    //Added test : replace bc.bars by generic variable barsRef 
    var barsRef = (typeof bc.bars[0].length === 'undefined') ? bc.bars : bc.bars[0];

    var bar, gutter_y, label_x, label_y, label_text;
    //Added consideration of set attrs (if set)
    var label_attr = (typeof attrs === 'undefined') ? {} : attrs;
    label_attr['fill'] = (typeof label_attr['fill'] === 'undefined') ? "#2f69bf" : label_attr['fill'];
    label_attr['font'] = (typeof label_attr['font'] === 'undefined') ? "16px sans-serif" : label_attr['font'];

    for (var i = 0; i<barsRef.length; i++) {
        bar = barsRef[i];
        gutter_y = bar.w * 0.4;
        label_x = bar.x
        label_y = bar.y + bar.h + gutter_y;
        label_text = labels[i];
        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
// I added an array of data to illustrate : data4
window.onload = function () {
    var r = Raphael("holder"),
        data3 = [25, 20, 13, 32, 15, 5, 6, 10],
        data4 = [0, 2, 1, 40, 1, 65, 46, 11],
        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, data4] {
            stacked: true,
            type: "soft"});
    bc.attr({fill: "#2f69bf"});

    labelBarChart(r, bc,
                 ['abc','b','card','d','elph','fun','gurr','ha'],
                 { fill:  "#2f69bf", font: "16px sans-serif" }
            );

};
</script>
<div id="holder"></div>

我刚刚测试了2个堆叠值的数组，所以我不确定它是否能正常工作（堆叠或不堆叠）。请让我知道！

带有文字x轴的graphael条形图

6 个答案: