带文本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

出于所有这些的缘故使用Google这样的：

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

x_start和y_start：从左下角坐标轴文本的距离

x_width：端部的位置的文字沿着x轴

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

步骤：是滴答数 - 1个

取向：好像以指定的x轴与y轴轴

类型：是使用的刻度标记的类型。

这全部从source code推导出来。我想我会切换到一个现在有文档的图表库...

Answer 2

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

Barchart with text x-axis

希望它帮助。

Answer 3

当前代码（Raphaeljs 2.0）已经改变，并且必须稍微改编以使用Raphael.g.axis代替rgaxis：

Raphael.g.axis（85230310，NULL，NULL，4,2，[ “今天”， “昨天”， “明天”， “未来”]， “|”，0，R）

Answer 4

读这个Q & 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

由于我想了解拉斐尔的工作方式，我想提出的一个解决方案Jonathan Eunice提出的labelBarChart函数问题。 考虑堆叠的杆graphes（或其他条形graphes与值的多于一个阵列），我添加上的情况下，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个阵列堆叠值的测试，所以我不知道是否能正常工作与更多的（堆叠或不）。请告诉我 ！