Question

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

最好，它们的数据标签（在我的示例中为点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'
            }]
    });

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/

API参考：

雷达图：图表外的标签

1 个答案: