diagramme à barres graphael avec texte x-axis

Je me demandais comment je peux faire un simple graphique à barres qui peut-être a jour que l'axe des x, avec des valeurs "aujourd'hui" et "hier", et l'axe des y comme peut-être le "temps" avec les valeurs correspondantes '1' et '2'. Je suppose que je suis confus quant à la façon de définir le texte comme les valeurs de l'axe des x, la façon de montrer l'axe des y, et qu'est-ce exactement r.g.axe n'...
(J'ai trouvé un exemple d'utilisation de axis = r.g.axis(0,300,400,0,500,8,2) et je ne sais que c'est la xpos, ypos,width, ??, ?? num ticks, ??). Aucune information serait génial! Ou une page plus complète de la barre graphique exemples (étiquettes, etc). Merci.

source d'informationauteur butterywombat

  1. 30

    Pour l'intérêt de tous ceux googler ce:

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

    x_start et y_start: distance de l'axe de texte à partir du coin en bas à gauche

    x_width: position de la fin du texte, le long de l'axe x

    de et à: utilisé pour spécifier et à utiliser au lieu d'utiliser les étiquettes argument

    étapes: est le nombre de tiques - 1

    orientation: semble pour spécifier l'axe des x vs y-axe

    type: est le type de graduation utilisée.

    C'était déduit de la le code source. Je pense que je vais passer à une cartographie bibliothèque de documentation...

  2. 10

    Le code actuel (Raphaeljs 2.0) a été modifié et doit être légèrement adapté pour une utilisation Raphaël.g.axe à la place de la r.g.axe:

    Raphaël.g.axe(85,230,310,null,null,4,2,["aujourd'Hui", "Hier",
    "Demain", "Futur"], "|", 0, r)

  3. 9

    vous êtes sur la bonne voie. Vous utilisez g.l'axe et la position des arguments pour la mise en place du texte est trouvé dans le "texte" arg (de position) et pour le basculement de l'axe à l'aide de la "orientation" args. J'ai ajouté un exemple ici,

    Barchart avec le texte de l'axe des x

    espère que cela aide.

  4. 7

    La lecture de ce Q&A et une douzaine comme ça, je ne pouvais toujours pas obtenir gRaphaël pour afficher des étiquettes pour un graphique à barres. Les recettes que tout semble se référer à des versions plus anciennes de la bibliothèque, ou à github pages qui ne sont plus là. gRaphaël produit quelques grands à la recherche de la sortie -, mais ses docs laissent beaucoup à désirer.

    Pourtant, j'ai été en mesure d'utiliser une combinaison de Firebug et Inspecter Cet Élément de suivre le code et voir ce qu'elle produit. Une plongée dans le barchart objet, la géométrie requise est juste là. Pour sauver les autres de la frustration, voici comment j'ai résolu le problème:

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

    Il y a un tas de peu de nettoyage que vous pouvez faire pour labelBarChart()mais en fait cela fait le travail.

  5. 2

    Voici une fonction que j'ai écrit pour l'ajout d'étiquettes. Il n'est pas particulièrement élégant, mais il va ajouter les étiquettes:

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

    Utilisation est la suivante:

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