在绘制折线图轴的自定义标签时,在标签旋转时,标签的文本与轴重叠。怎么能解决这个问题呢?我尝试搜索文档,发现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"));
}
答案 0 :(得分: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:在我打电话给拉斐尔生成图表之后,我将条形推入了我的道具变量。
// 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();
它适用于我,我可以访问其他地方的酒吧,所以我可以用它们在条形图,标签等上面绘制数字。
希望得到这个帮助。
答案 1 :(得分:0)
在for
圈内使用:
axisItems[i].translate(0,30);
我还建议你旋转90而不是270,这样文字就会向下延伸而不是向上......