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