gráfico de barras graphael con texto eje x

Question

Me preguntaba cómo puedo hacer un gráfico de barras simple que tal vez tenga el día como el eje x, con valores 'hoy' y 'ayer', y el eje y tal vez ' time 'con los valores correspondientes' 1 'y' 2 '. Supongo que estoy confundido sobre cómo configurar el texto como los valores para el eje x, cómo mostrar el eje y, y qué es exactamente lo que hace el rgaxis ... (Encontré un ejemplo usando axis = r.g.axis(0,300,400,0,500,8,2) y solo sé que es el xpos, ypos, width, ??, ?? num ticks, ??). ¡Cualquier idea sería genial! O una página con ejemplos de gráficos de barras más completos (etiquetas, etc.). Gracias.

Answer 1

Por el bien de todos los googling esto:

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

x_start y y_start: distancia del texto eje desde la esquina inferior izquierda

x_width: posición del extremo del texto a lo largo del eje x

de y a: utiliza para especificar y el rango de usar en lugar de utilizar el argumento etiquetas

pasos: es el número de garrapatas - 1

orientación: parece especificar eje x vs. y- eje

tipo: es el tipo de marca utilizada.

Todo esto se dedujo del source code. Yo creo que vaya a cambiar a una biblioteca de gráficos con la documentación ahora ...

Answer 2

Estás en el camino correcto. Usted usa g.axis y los argumentos posicionales para establecer el texto se encuentran en el 'texto' arg (posicional) y para alternar el y usando los argumentos 'orientación'. He añadido un ejemplo aquí,

Barchart with text x-axis

espero que ayude.

Answer 3

El código actual (Raphaeljs 2.0) ha cambiado y tiene que ser ligeramente adaptada para usar en lugar de Raphael.g.axis rgaxis:

Raphael.g.axis (85.230.310, null, null, 4,2, [ "Hoy", "Yesterday", "mañana", "futuro"], "|", 0, r)

Answer 4

Al leer esta Q & A y a una docena de ellas les gusta, todavía no puedo hacer que gRaphaël muestre las etiquetas adecuadas para un gráfico de barras. Todas las recetas parecían referirse a las versiones anteriores de la biblioteca, o a las páginas de Github que ya no están allí. gRaphaël produce una excelente apariencia, pero sus documentos dejan mucho que desear.

Sin embargo, pude utilizar una combinación de Firebug e Inspeccionar este elemento para seguir el código y ver qué producía. Al sumergirse en el objeto del diagrama de barras, la geometría requerida está ahí.Para salvar a los demás la frustración, así es como he resuelto el problema:

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

Hay un montón de pequeñas limpiezas que podría hacer para labelBarChart(), pero esto básicamente hace el trabajo.

Answer 5

Aquí hay una función que escribí para agregar las etiquetas. No es particularmente elegante pero añadirá las etiquetas:

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

uso es el siguiente:

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

Como estoy tratando de comprender la forma en que funciona Raphaël, me gustaría proponer una solución de una cuestión de la función de etiquetaBarChart propuesta por Jonathan Eunice. teniendo en cuenta barras grafiladas apiladas (u otros gráficos de barra con más de una matriz de valores), agregué una prueba en bc.bars [0] en caso de que bc.bars.length signifique el número de matrices de valores apilados.

Esto condujo al código:

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

Acabo de prueba con 2 matrices de valores apilados, así que no sé a ciencia cierta si funciona bien con más (apilados o no). Por favor hagamelo saber !