Question

考虑到我的数据数组总是由4个元素组成：

  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/

对我来说，仅显示那些标签和放大器非常重要。将它们保存在全局高图容器中。

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/

Highcharts极坐标图表显示特定刻度区的标签

2 个答案: