На линейной диаграмме Рафаэля метки осей перекрываются с линиями осей

Ярлыки перекрывают ось

При построении пользовательской метки для оси линейного графика при вращении метки текст метки перекрывается с осью. Как можно решить эту проблему? Я попытался найти документацию и обнаружил, что Element.transform() следует использовать для вращения вместо rotate(), поскольку он обесценился, но я не могу заставить его работать. Может ли кто-нибудь помочь?

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

javascript linechart axis-labels raphael
person FiendFyre    schedule 24.07.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Не уверен, что вам это все еще нужно... но в итоге я пишу свою собственную функцию метки

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: я поместил столбцы в свою переменную 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();

Это работает для меня, и я могу получить доступ к столбцам везде, поэтому я могу использовать их для рисования чисел поверх столбцов, меток и т. д.

Надеюсь, это поможет.

person codenamezero    schedule 27.08.2013

arrow_upward
0
arrow_downward

Внутри вас используется цикл for: axisItems[i].translate(0,30);

Я бы также рекомендовал вам повернуть на 90, а не на 270, чтобы текст расширялся вниз, а не вверх...

person epeleg    schedule 18.11.2013