Question

我正在极坐标图上使用ReactHigh图表，我希望我的标签进入圆圈的各个部分之间，它们正在点上，但我不希望它们来到那里。

JSfiddle：

我还希望每个标签上都有背景颜色。截至目前的图表： https://jsfiddle.net/ra73mp0c/12/

Desried结果：

请帮帮我。

图表配置：

    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'
    }
  ]
}

非常感谢，你可以编辑小提琴链接

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/

HighCharts Polar标签介于圈子之间

1 个答案: