帶文本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個陣列堆疊值的測試，所以我不知道是否能正常工作與更多的（堆疊或不）。請告訴我 ！