grafaha Balkendiagramm mit Text x-Achse

Question

Ich frage mich, wie ich ein einfaches Balkendiagramm erstellen kann, das vielleicht Tag als die x-Achse hat, mit Werten 'heute' und 'gestern', und die y-Achse vielleicht ' Zeit 'mit den entsprechenden Werten' 1 'und' 2 '. Ich glaube, ich bin verwirrt, wie man Text als die Werte für die x-Achse einstellt, wie man die y-Achse zeigt, und was genau rgaxis tut ... (Ich fand ein Beispiel mit axis = r.g.axis(0,300,400,0,500,8,2) und ich weiß nur, dass es ist die xpos, , width, ??, ?? num ticks, ??). Jede Einsicht wäre großartig! Oder eine Seite mit umfangreicheren Balkendiagrammen (Beschriftungen usw.). Vielen Dank.

Answer 1

Aus Gründen der alle Googling dieses:

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

x_start und y_start: Abstand der Achse von Text aus der linken unteren Ecke

x_width: Position des Endes des Textes entlang der x - Achse

von und zu: verwendet, um anzugeben und den Bereich zu verwenden, anstatt die Etiketten Argument des Verwendens

Schritte: ist die Anzahl der Zecken - 1

Orientierung: scheint x-Achse gegen y- angeben Achse

Typ: ist die Art der verwendeten Teilstriche.

Dies wurde alles aus der source code abgeleitet. Ich denke, ich werde jetzt mit der Dokumentation zu einer Charting-Bibliothek werden Schale ...

Answer 2

Sie sind auf dem richtigen Weg. Sie verwenden g.axis und die Positionsargumente zum Setzen des Textes finden Sie im 'text' arg (positional) und zum Umschalten des y mit den 'orientation'-Argumenten. Ich habe hier ein Beispiel,

Barchart with text x-axis

hoffe, es hilft.

Answer 3

Den aktuellen Code (Raphaeljs 2.0) geändert hat und leicht Raphael.g.axis angepasst werden muss, um anstelle von rgaxis:

Raphael.g.axis (85.230.310, null, null, 4,2, [ "Today", "Yesterday", "Tomorrow", "Zukunft"], "|", 0, r)

Answer 4

Ich las dieses Q & A und ein Dutzend wie es, ich konnte gRaphaël immer noch nicht die richtigen Etiketten für ein Balkendiagramm zeigen. Die Rezepte scheinen sich alle auf ältere Versionen der Bibliothek zu beziehen oder auf Seiten, die nicht mehr existieren. gRaphaël produziert etwas großartig aussehende Ausgabe - aber seine Dokumente lassen viel zu wünschen übrig.

Ich war jedoch in der Lage, eine Kombination von Firebug und Inspect This Element zu verwenden, um den Code zu folgen und zu sehen, was es produziert. Beim Eintauchen in das Barchart-Objekt ist die erforderliche Geometrie genau da.So speichern Sie anderen die Frustration, hier ist, wie ich das Problem gelöst:

<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> 

Es gibt eine Reihe von kleinen Cleanups Sie labelBarChart() tun könnten, aber dies wird im Grunde die Arbeit erledigt.

Answer 5

Hier ist eine Funktion, die ich für das Hinzufügen der Etiketten geschrieben habe. Es ist nicht besonders elegant, aber es wird die Etiketten hinzufügen:

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); 
    } 
}; 

Verwendung ist wie folgt:

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

Als ich die Art und Weise zu verstehen, ich versuche, Raphaël funktioniert, ich möchte eine Lösung eines vorzuschlagen Ausgabe der von Jonathan Eunice vorgeschlagenen Funktion labelBarChart. Bei gestapelten Balkengraphen (oder anderen Balkengraphen mit mehr als einem Wertefeld) habe ich einen Test auf bc.bars [0] hinzugefügt, falls bc.bars.length die Anzahl der gestapelten Wertefelder bedeutet.

Dies führt zu dem Code:

<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>

Getestet habe ich es nur mit zwei Reihen von Werten gestapelt, so dass ich weiß nicht sicher, ob es mit mehr einwandfrei funktioniert (gestapelt oder nicht). Lass es mich wissen, bitte !