highcharts 极坐标图，单独移动标签以适应小空间答案

【问题标题】：highcharts polar chart, move labels individually to fit small spacehighcharts 极坐标图，单独移动标签以适应小空间
【发布时间】：2018-08-09 15:37:58
【问题描述】：

我有一个极坐标图，我试图在 x 轴上移动四个标签中的两个。它是狭窄空间中的菱形，因此左右的标签被切断。我试图移动它们，但我无法让它们移动。我正在尝试将标签类别 1 和类别 3 向下移动 30 像素并向中心移动约 100 像素。

标签代码

  xAxis: {
   categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
   tickmarkPlacement: 'on',
   lineWidth: 0,
   labels: {
   style: { fontSize: '150%',
},
},
},

小提琴 https://jsfiddle.net/Adam300/kuvs0eah/8/

我从here 中查看了this fiddle，但我无法理解它。

【问题讨论】：

您在饼图中看到的小提琴很有效，因为饼图的每一片都属于自己的系列，可以自定义。由于您在同一系列中拥有所有要点，因此 Core972 的答案是一个很好的解决方法。

标签： javascript highcharts spider-chart

【解决方案1】：

由于只有一个系列，我能想到的唯一解决方案就是使用这个 CSS 代码：

.highcharts-xaxis-labels text:nth-child(1), .highcharts-xaxis-labels text:nth-child(3){
   transform: translate(0,47px); !important;
}

它并不完美，但它有效

Fiddle

【讨论】：

【解决方案2】：

您可以设置chart.marginLeft 和chart.marginRight 属性来定义图表容器的边距。请看下面的代码和示例：

chart: {
   polar: true,
   type: 'line',
   marginLeft: 100,
   marginRight: 100,
   style: {
    fontFamily: 'Georgia',
   }
}

现场示例：https://jsfiddle.net/fjhz4wx7/

API 参考：

https://api.highcharts.com/highcharts/chart.marginLeft

https://api.highcharts.com/highcharts/chart.marginRight

亲切的问候！

【讨论】：

谢谢，但这也会使图表变小，这是我做不到的。不过，我学到了一些新东西。