Javascript Highcharts将极性区域标签放置在外部周围

Javascript Highcharts将极性区域标签放置在外部周围,javascript,css,charts,highcharts,Javascript,Css,Charts,Highcharts,我正在海图中创建一个极区图。当一些图表段明显小于其他图表段时(如果我关闭allowOverlap,它们就会消失),我似乎无法克服标签相互碰撞的问题。是否可以将标签排列在圆的外侧?我需要保持图表的响应性,否则我绝对会定位它们 chart: { polar: true, backgroundColor: 'transparent', plotBorderWidth: null, margin: [0, 0, 0, 0], spacingTop: 0,

我正在海图中创建一个极区图。当一些图表段明显小于其他图表段时(如果我关闭allowOverlap,它们就会消失),我似乎无法克服标签相互碰撞的问题。是否可以将标签排列在圆的外侧?我需要保持图表的响应性,否则我绝对会定位它们

chart: {
    polar: true,
    backgroundColor: 'transparent',
    plotBorderWidth: null,
    margin: [0, 0, 0, 0],
    spacingTop: 0,
    spacingBottom: 0,
    spacingLeft: 0,
    spacingRight: 0
}
以下是我目前掌握的情况:


我尝试创建一个新的列系列,每个值都设置为10,但这只是压缩了我已有的数据。尝试使用带有标签的直线系列,但标签位于点的中心,而不是圆的外部,因此它们会被颜色填充遮挡。

不是真正的解决方案,但您可以对每个点使用
dataLabels.x
dataLabels.y
,例如:-但是您需要事先知道这些值。通用的解决方案是从核心包装
alignDataLabel
方法。或者最后一个解决方案可能是翻译
chart.events.load
chart.events.redraw
方法中的标签,如或。我认为您的示例没有成功,但这听起来至少会给我一个响应性的解决方案,对吗?如果我为每个标签手动设置x和y坐标,x/y选项是从Highcharts计算出的位置的偏移量,所以这是一种响应性的解决方案。不过,我不能保证不会出现标签定位错误的情况。因为图表是根据用户响应动态生成的,可能有多种配置,所以偏移量不会真正起作用。我想我会尝试将标签制作成HTML并绝对定位它们。