如何使用HighChart 4移动极坐标（蜘蛛）图的标题标签？

Question

我创建了一个极坐标图。它有一些复杂的标题标签。它在桌面上看起来像预期的那样：

但是当它在移动设备上时，标题标签没有足够的空间出现。 HighCharts也没有为我做过。所以它看起来像这样：

我想要的是在三角形下移动两个标题标签，而不改变它在桌面视图中的行为方式。

我能做些什么来实现这个目标？

谢谢！

Answer 1

您可以使用tick.label.attr({ x: new_x });方法翻译标签。例如，创建一些重新定位方法：

function reposition () {
    var chart = this,
        xAxis = chart.xAxis[0],
        tick, bbox, xy;

  $.each(xAxis.tickPositions, function(i, pos){
    tick = xAxis.ticks[pos];

    if (tick && tick.label) {
      bbox = tick.label.getBBox(); // get label's bounding box
      xy = tick.label.xy;  // get label's xy position

      if (xy.x - bbox.width < 0) {
        tick.label.attr({
            x: bbox.width
        });
      }

      if (xy.x + bbox.width > chart.plotWidth + chart.plotLeft) {
        tick.label.attr({
            x: chart.plotWidth + chart.plotLeft - bbox.width
        });
      }
    }
  });
}

将在每个图表重绘和启动加载事件时调用：

$('#container').highcharts({
    chart: {
        polar: true,
        type: 'line',
        events: {
            redraw: reposition,
          load: reposition
        }
    },
    ... 
 });

现场演示：TeeOutputStreams