[英]How can I specify the position of the columns relative to the X-axis labels in a column chart using Highcharts?
[英]How can I position rotated x-axis labels on column chart using nvd3?
我正在使用nvd3的multiBarChart构建条形图,需要调整旋转的x轴标签的位置:
var chart = nv.models.multiBarChart();
...
chart.rotateLabels(-90);
我希望列标签不与图表重叠并在每个条形图下居中。 我可以在绘制图表后选择标签并调整它们但是有更简单的方法吗?
我发现处理这个问题的最好方法是自己执行x轴刻度标签的旋转。 为什么? 因为NVD3没有正确处理旋转和相关的翻译。 查看您的图像,您将看到库允许旋转将标签从它们所代表的列的正下方转换出来。 它也开始错误处理axis.tickPadding()
值,依此类推。
您需要做的第一件事是确保图表有足够的空间用于翻译的标签,如下所示:
chart.margin({bottom: 60});
然后我们可以翻译和旋转标签:
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;
标签现在看起来像这样:
对于多图,您可以在d3.select中添加“ '#'+ containerId +'svg ”,如下所示:
//Rotate x-axis label
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });
无论如何,感谢@River回答。
这对我有用。 我提交这个的主要原因是更改锚点比手动翻译位置更好。
var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text');
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xTicks.attr('text-anchor',function() {
var anchor;
if(angle > 0){ anchor = 'start'; }
else if(angle < 0){ anchor = 'end'; }
else { anchor = 'middle'; }
return anchor;
});
以下对我有用:
chart.axislist["xAxis"]["rotateLabels"]= -45
无论文本旋转是什么,都要给出开始/中间/结束
d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end
有一个css替代品。
.nv-x .tick text {
transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.