0

Labels overlapping axis

When plotting a custom label for line chart axis, on rotation of label the label's text overlaps with axis. How can one solve this issue? I tried searching documentation and found Element.transform() is to be used for rotation instead of rotate() since its depreciated, but I'm not able to make it work. Can some one help?

   var lines1 = r.linechart(100, 50, 950, 470, x,
                             y, {
                                smooth : false,
                                symbol : 'circle',
                                axis : "0 0 1 1",
                                axisxstep: 20,
                                axisystep:20
                            }).hoverColumn(function () {
                                this.tags = r.set();
                                     for (var i = 0, ii = this.y.length; i < ii; i++) {
                                            this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 5).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
                                        }
                                    }, function () {
                                        this.tags && this.tags.remove();
                                    }); 

                         var axisItems = lines1.axis[0].text.items
                        for( var i = 0, l = axisItems.length; i < l; i++ ) {
                           var date = new Date(parseInt(axisItems[i].attr("text")));
                           axisItems[i].rotate(270,this.x ,this.y);
                           axisItems[i].attr("text", dateFormat(date, "dmmm,htt")); 
                        }
4

2 に答える 2

0

これがまだ必要かどうかはわかりません...しかし、私は自分のラベル関数を書くことになります

if (props.label !== undefined) {
    // don't use the default Raphael label() function, is broken
    chart.customLabel = customLabelFn;
    chart.customLabel(props.label);
}

customLabelFn はラベルの描画方法です。これは、縦棒グラフの例です。

customLabelFn = function (labels) {
    var x, y;
    labels = labels || [];

    for (var i = 0; i < props.bars.length; i++) {
        x = props.bars[i].x;
        y = props.bars[i].y + props.bars[i].h + props.xaxisLabelOffset;
        props.r.text(x, y, labels[i]);
    }
    return this;
};

PS: Raphael を呼び出してグラフを生成した後、バーを props 変数にプッシュしました。

// immediately calls the function so that we can have all the rendered bars
chart.getBars = function() {
    props.bars = (props.stacked ?
        this.bars[0] : // pick the one and only bar
        this.bars);
};
chart.getBars();

それは私にとってはうまくいき、他のどこからでもバーにアクセスできるので、それらを使用してバーやラベルなどの上に数字を描くことができました.

この助けを願っています。

于 2013-08-27T14:03:22.870 に答える
0

forループ 内で次を使用します。axisItems[i].translate(0,30);

また、テキストが上ではなく下に伸びるように、270 ではなく 90 に回転させることをお勧めします...

于 2013-11-18T09:08:01.327 に答える