高图极坐标图在特定的刻度季度显示标签

Question

考虑到我的数据数组始终由以下四个元素组成：

  var data = [
{"type":"column","name":"My Label 1","y":38.9500000000003,"color":"#7cb342"},           
{"type":"column","name":"My Label 2","y":30,"color":"#7cb342"},                                     {"type":"column","name":"My Label 3","y":51.85,"color":"#fbc02d"},                  {"type":"column","name":"My Label 4","y":55.2999999999997,"color":"#fbc02d"}];

我想知道如何在每个45度刻度间隔内设置数据名称（ data.name ），以保持它们的位置？

这是示例：

http://jsfiddle.net/eento/7rupgxde/4/

对我而言，仅显示这些标签并将它们保留在全局highchart容器中非常重要。

Answer 1

像这样？

dataLabels: {
    enabled: true,
    formatter: function() {
        return this.point.name;
    }
}

例：

• http://jsfiddle.net/jlbriggs/7rupgxde/5/

Answer 2

您可以使用渲染器来渲染这些标签，例如，创建两种方法（一种用于添加标签，另一种用于放置标签）：

function renderLabels(chart) {
  var alignments = ['right', 'right', 'left', 'left'];
  $.each(chart.series[0].points, function(i, point) {
    point.myName = chart.renderer.text(point.name, -9999, -9999).attr({
      align: alignments[i],
      color: 'black'
    }).add();
  });
}

function positionLabels(chart, anim) {
  var positions = [
    // top right label
    [chart.plotLeft + chart.plotWidth, chart.plotTop],
    // bottom right label
    [chart.plotLeft + chart.plotWidth, chart.plotTop + chart.plotHeight],
    // bottom left label
    [chart.plotLeft, chart.plotTop + chart.plotHeight],
    // top left label
    [chart.plotLeft, chart.plotTop], 
  ]
  $.each(chart.series[0].points, function(i, point) {
    if (point.myName) {
      point.myName[(anim ? 'animate' : 'attr')]({
        x: positions[i][0],
        y: positions[i][1],
      })
    }
  });
}

然后在chart.events使用这些方法：

chart: {
  polar: true,
  renderTo: 'container',
  backgroundColor: null,
  events: {
    load: function() {
      renderLabels(this);
      positionLabels(this, false);
    },
    redraw: function() {
      positionLabels(this, true);
    }
  }
},

并运行演示： http : //jsfiddle.net/7rupgxde/7/