Question

我有一个蜘蛛网图表，其中情节线为特定值。 Gridline interploation用作圆圈。在这种情况下，默认情况下，提供的标签显示为距离情节线（图表的左上角）非常远。

我怎样才能始终在情节线圆的中心或特定位置显示标签，而无需手动计算x和y点。

Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'line'
  },

  title: {
    text: 'Budget vs spending',
    x: -80
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
      'Information Technology', 'Administration'
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

  yAxis: {
    gridLineInterpolation: 'circle',
    lineWidth: 0,
    min: 0,
    plotLines: [{
      value: 35000,
      width: 2,
      dashStyle: "Solid",
      color: "red",
      label: {
        text: "Line Marker",
        style: {
          color: "red"
        }
      }
    }]
  },

  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },

  series: [{
    name: 'Allocated Budget',
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    pointPlacement: 'on'
  }, ]

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

Answer 1

使用x和y参数来定位标签：Link to documentation

Answer 2

不幸的是，你需要计算极坐标图中的标签位置，尽管并不难。使用Axis.toPixels函数将轴值更改为像素，并将其用作标签的x和y位置。看一下下面的例子。

API参考：
http://api.highcharts.com/highcharts/Axis.toPixels
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/xAxis.plotLines.label.x
http://api.highcharts.com/highcharts/xAxis.plotLines.label.y

例：
http://jsfiddle.net/z7ya2r9y/

带有圆形网格线插值的Spiderweb图表：标签距离Plotline

2 个答案: