14

おそらく「今日」と「昨日」の値を持つx軸として日を持ち、対応する値「1」と「2」を持つおそらく「時間」としてy軸を持つ単純な棒グラフをどのように作成できるか疑問に思っていました. '。テキストを x 軸の値として設定する方法、y 軸を表示する方法、および rgaxis が正確に何をするかについて混乱していると思います... (使用する例を見つけaxis = r.g.axis(0,300,400,0,500,8,2)ましxposたypos。width、??、?? num ticks、??)。どんな洞察も素晴らしいでしょう！または、より完全な機能を備えた棒グラフの例 (ラベルなど) を含むページ。ありがとう。

4

6 に答える 6

30

これをグーグルで検索しているすべての人のために：

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

x_startおよび y_start : 左下隅から軸テキストまでの距離

x_width : x 軸に沿ったテキストの終わりの位置

fromおよびto : ラベル引数を使用する代わりに使用する範囲を指定するために使用されます

steps : ティック数 - 1

向き: x 軸と y 軸を指定しているようです

type : 使用される目盛りのタイプです。

これはすべてソース コードから推測されたものです。ドキュメント付きのチャートライブラリに切り替えると思います...

于 2011-07-19T19:26:54.863 に答える
10

現在のコード (Raphaeljs 2.0) は変更されており、rgaxis の代わりに Raphael.g.axis を使用するように少し調整する必要があります。

Raphael.g.axis(85,230,310,null,null,4,2,["今日", "昨日", "明日", "未来"], "|", 0, r)

于 2012-03-01T18:20:03.700 に答える
9

あなたは正しい方向に進んでいます。g.axisを使用すると、テキストを設定するための位置引数は「text」引数（位置）にあり、「orientation」引数を使用してyを切り替えるために使用されます。ここに例を追加しました、

テキストのx軸を持つ棒グラフ

于 2011-02-22T08:30:24.513 に答える
7

この Q&A とそれに類する多くの記事を読んでも、まだ gRaphaël に棒グラフの適切なラベルを表示させることができませんでした。レシピはすべて、古いバージョンのライブラリ、または存在しない github ページを参照しているように見えました。gRaphaël は見栄えの良い出力を生成しますが、そのドキュメントには多くの要望が残されています。

しかし、Firebug と Inspect This Element の組み合わせを使用して、コードを追跡し、生成されたものを確認することができました。barchart オブジェクトに飛び込むと、必要なジオメトリがすぐそこにあります。他の人をフラストレーションから救うために、私が問題を解決した方法は次のとおりです。

<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()、基本的にはこれで作業が完了します。

于 2013-01-17T03:43:07.633 に答える
2

これは、ラベルを追加するために作成した関数です。特にエレガントではありませんが、ラベルを追加します。

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});
于 2013-03-30T21:58:17.043 に答える
1

Jonathan Euniceによって提案された labelBarChart 関数の問題の解決策を提案したいと思います。積み重ねられた棒グラフ (または複数の値の配列を持つ他の棒グラフ) を考慮して、bc.bars.length が積み重ねられた値の配列の数を意味する場合に備えて、bc.bars[0] にテストを追加しました。

これはコードにつながります：

<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つの配列を積み重ねてテストしました。

于 2015-03-03T15:16:31.460 に答える