雷达图：图表外的标签答案

【问题标题】：Radar Chart: Label outside the chart雷达图：图表外的标签
【发布时间】：2019-04-29 22:34:26
【问题描述】：

我创建了一个带有高图的雷达图。数据标签总是在图表中（在边框中），但我希望它们在外面。

最好的情况是，它们的数据标签（在我的示例中为点 1-5）在其饼图中有一条线（如饼图），并且它们垂直位于饼图的中间。所以我不知道如何编码数据标签。

Highcharts.chart('container', {

        chart: {
            polar: true
        },

        title: {
            text: 'Goals'
        },

        subtitle: {
            text: 'Goals'
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        xAxis: {
            tickInterval: 72,
            min: 0,
            max: 360,
            labels: {
                format: false
            }
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 73,

                dataLabels: {
                    enabled: true,
                    crop: true,
                    overflow: 'none',
                    padding: 50,
                    verticalAlign: 'middle',
                    format: '{point.name}'

                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between'
            }
        },

        series:
            [{
                type: 'column',
                name: 'Goal',
                data: [

                    {
                        name: 'Point 1',
                        y: 1
                    },
                    {
                        name: 'Point 2',
                        y: 2
                    },
                    {
                        name: 'Point 3',
                        y: 3
                    },
                    {
                        name: 'Point 4',
                        y: 4
                    },
                    {
                        name: 'Point 5',
                        y: 5
                    },

                ],
                pointPlacement: 'between'
            }]
    });

【问题讨论】：

标签： javascript highcharts radar-chart

【解决方案1】：

很遗憾，极坐标图中不支持数据标签连接器。但是，它可以通过附加的pie 系列来完成，该系列位于主要系列之下并与之链接。检查下面发布的演示和代码。

代码：

Highcharts.chart('container', {
  chart: {
    polar: true
  },
  title: {
    text: 'Goals'
  },
  subtitle: {
    text: 'Goals'
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    tickInterval: 73,
    min: 0,
    labels: {
      format: false
    }
  },
  yAxis: {
    min: 0,
    max: 5
  },
  plotOptions: {
  	series: {
    	states: {
      	inactive: {
        	opacity: 1
        }
      }
    },
    column: {
      pointStart: 0,
      pointInterval: 73,
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    animation: false,
    linkedTo: 'main',
    size: '5%',
    dataLabels: {
    	distance: 130
    },
    states: {
    	hover: {
      	enabled: false,
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 1
    }, {
      name: 'Point 3',
      y: 1
    }, {
      name: 'Point 4',
      y: 1
    }, {
      name: 'Point 5',
      y: 1
    }]
  }, {
    type: 'column',
    name: 'Goal',
    id: 'main',
    colorByPoint: true,
    animation: false,
    states: {
    	hover: {
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 2
    }, {
      name: 'Point 3',
      y: 3
    }, {
      name: 'Point 4',
      y: 4
    }, {
      name: 'Point 5',
      y: 5
    }],
    pointPlacement: 'between'
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>

演示：

https://jsfiddle.net/BlackLabel/640jyoxp/

API 参考：

【讨论】：