How do I move the title-label of a polar (spider) graph with HighChart 4?

问题

I created a polar graph. It has some complicated title-lables. It looks as expected on desktop:

But when it's on mobile, the title-lables don't have enough room to show up. And HighCharts neither did it for me. So it looks like this:

What I desire is to move the two title-labels under the triangle, without changing how it behaves in Desktop view.

What can I do to achieve this?

Thanks!

回答1:

You can translate labels using tick.label.attr({ x: new_x }); method. For example, create some reposition method:

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
        });
      }
    }
  });
}

Which will be called on each chart redraw and starting load events:

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

Live demo: http://jsfiddle.net/wmgbbp9k/

来源：https://stackoverflow.com/questions/34272363/how-do-i-move-the-title-label-of-a-polar-spider-graph-with-highchart-4