在极坐标图中单独定位 x 轴标签答案

【问题标题】：Individual positioning of x-axis labels in a polar highchart在极坐标图中单独定位 x 轴标签
【发布时间】：2013-08-23 08:04:45
【问题描述】：

我有一个包含 12 个类别的极坐标图表。由于 x 轴标签最多包含 4 行，因此顶部和底部的类别的自动标签 y 定位略有偏差。它看起来类似于this example，但在我的情况下，标签与图表区域重叠，而不是彼此重叠。所以我需要从顶部标签的 y 坐标中减去几个像素，并为底部的类别标签添加几个像素。

我尝试设置 x 轴的偏移参数，但这会将所有标签向上或向下移动相同的量：

xAxis: {
    offset: 20
}

我也尝试在 x 轴标签的格式化程序中添加一个回调函数，但我就是不知道如何调整每个类别标签的位置。

【问题讨论】：

你试过设置y postion吗？它应该移动标签。如果这没有帮助，您可以浏览所有标签（通过chart.series[0].data[0].dataLabel.attr( options );）并设置新选项，其中选项可以是 x、y、边框等。
您引用的 y 参数似乎对所有标签都只取一个数字。但我需要单独调整标签。没试过chart.series[0].data[0].dataLabel.attr( options );，我改用较短的标签也解决了这个问题。
是的，这也使图表更清晰。

标签： javascript css charts highcharts

【解决方案1】：

这是highchart Heldesk的解决方案

http://jsfiddle.net/crguqmsv/1/

function(chart){
    var len = chart.xAxis[0].ticks.length;

    $.each(chart.xAxis[0].ticks,function(i,tick){

        if(i>=0 && i<=90) {
            console.log(tick.label.attr({
                rotation:-45
            }));
        } 
    });
}

【讨论】：

【解决方案2】：

您可以在轴定义下的“标签”类别中使用“x”和“y”选项调整标签的位置。

labels: {
     x: 20,
     y: 10
}

在上述情况下，标签将在默认位置向右 20px 和向下 10px。

编辑：我重新阅读了标题，对不起，这是针对所有标签的，而不是单独的。我的错。

【讨论】：