高图雷达图:图表外的标签

Question

我创建了一个带有高图的雷达图。数据标签在图表中(在边框中(的所有方式，但我希望它们在外面。

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

这是我的小提琴：https://jsfiddle.net/ghu21x0e/

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

Answer 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/

接口参考：

• https://api.highcharts.com/highcharts/series.pie.dataLabels.distance

• https://api.highcharts.com/highcharts/series.pie.linkedTo