Question

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

标签代码

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

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

我从this fiddle看了here，但是我很难理解。

Answer 1

由于只有一个系列，所以我认为唯一的解决方案是使用此CSS代码：

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

这不是完美的，但是可行

Fiddle

Answer 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

亲切的问候！

highcharts极坐标图，单独移动标签以适合较小的空间

2 个答案: