Raphael Line Chart Подписи оси перекрывающихся с оси линий

Question

При построении пользовательской метки для оси линии диаграммы, на вращение метки текста лейбла перекрывается с осью. Как можно решить эту проблему? Я попытался найти документацию и нашел, что 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")); 
         } 

Answer 1

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

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: Я толкнул решетку в мой реквизите переменного после того, как я назвал Рафаэль, чтобы создать таблицу.

// 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(); 

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

Надежды этой помощи.

Answer 2

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

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