如何使用HighChart 4移动polar（spider）图形的标题标签？ [英] How do I move the title-label of a polar (spider) graph with HighChart 4?

问题描述

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

但是当它在移动时，标题标签没有足够的空间显示。 HighCharts对我来说也没有。所以它看起来像这样：

我可以做些什么来达到这个目的？

谢谢！

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&& amp ; tick.label）{
 bbox = tick.label.getBBox（）; //获取标签的边界框
 xy = tick.label.xy; //获取标签的xy位置
 
 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（{
图表：{
 polar：true，
类型：'line'，
 events：{
 redraw：reposition，
 load：reposition 
} 
}，
 ... 
}）; 
  

现场演示： http://jsfiddle.net/wmgbbp9k/

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!

解决方案

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/

这篇关于如何使用HighChart 4移动polar（spider）图形的标题标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！