highcharts - HighCharts Polar Labels 在圆的扇区之间

Question

我在极坐标图上使用 ReactHigh 图表，我希望我的标签出现在圆圈的各个扇区之间，它们出现在点上，但我不希望它们出现在那里。

JSfiddle：https ://jsfiddle.net/ra73mp0c/12/

我还想要每个标签上的背景颜色。截至目前的图表：

预期结果：

请帮我 。

图的配置：

    const config = {
      chart: {
       polar: true,
       type: 'line',
        width: 700,
       backgroundColor: 'transparent',
      plotBorderWidth: null,
       margin: [0, 0, 0, 0],
      spacingTop: 0,
       spacingBottom: 0,
        spacingLeft: 0,
      spacingRight: 0

  },

  title: {
    text: null
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: [
      'Sales',
      'Sales',
      'Sales',
      'Sales',
      'Marketing',
      'Development',
      'Customer Support',
      'Customer Support',
      'Customer Support',
      'Information Technology'
    ],
    labels: {
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    },
    tickmarkPlacement: 'on'
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    min: 0,
    tickInterval: 1,
    max: 6
  },

  tooltip: {
    shared: true
  },

  legend: {
    enabled: false
  },
  credits: { enabled: false },
  series: [
    {
      name: 'Allocated Budget',
      data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
      pointPlacement: 'between'
    },
    {
      name: 'Actual Spending',
      data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
      pointPlacement: 'between'
    }
  ]
}

非常感谢，如果您可以编辑小提琴链接https://jsfiddle.net/ra73mp0c/12/将会很有帮助

Answer 1

Highcharts 不支持为 x 轴标签创建这种背景。

作为一种解决方法，您可以创建一个模仿其外观的幻影系列：

{
  showInLegend: false,
  type: 'polygon',
  name: 'Labels background',
  data: [
    [1, 5],
    [2, 5],
    [2, 6],
    [1, 6]
  ],
  zIndex: -9999
}

labels.distance应该是一个负值才能使其工作。

演示： https ://jsfiddle.net/BlackLabel/63nc1csv/