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

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"}];

我想知道如何设置我的数据名称 (data.name) 每 45 度刻度间隔以保持它们的位置正确？

示例如下：

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 极坐标图在特定刻度季度显示标签

Highcharts Polar charts display labels on specific tick quarters

javascript

charts

custom-controls

highcharts