旋转的X轴标签与图形本身重叠

我正在用旋转的x轴标签挣扎。如果它们长于5-6个字符，则它们会与图中所示重叠：http://jsfiddle.net/kmfT9/215/ 如果不显示，您可以在jsfiddle窗口中重现粘贴在代码下面的错误。旋转的X轴标签与图形本身重叠

var chart = new Highcharts.Chart({ 

chart: { 
renderTo: 'container', 
marginLeft: 120 
}, 

xAxis: { 
categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 } 
}, 

yAxis: { 
lineWidth: 1, 
offset: 0, 
labels : { x: -20 }, 
title: { 
text: 'Primary Axis' 
}, 
tickWidth: 1 
}, 

series: [{ 
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}] 

});

尽管在标签属性上设置了y值，但仅对于较小的标签才适用。

任何人都知道解决方案或我做错了什么？

来源

2011-03-17 Guillaume Schuermans

您可以尝试在x轴标签对象上添加align：'right'。

例如

 
xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } },

来源

2011-03-17 12:58:10 escouser

有时你必须这样做，客户想要的，我知道的远远低于它不是最好的方法，但可能会帮助别人）。所以，据我所知，HighCharts使用两种方式来显示图表。它是SVG（例如支持的Chrome，IE> 8浏览器）和VML（IE < = 8支持）。因此，每种方式都包含了解决这个问题的要点，您可以通过软中断来解决问题。

要解决它在SVG，你必须找到buildText功能，在这一点修改：

// check width and apply soft breaks 
if (width) { 
... 
}

例如增加新的单独的符号：

... 
var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '), 
... 
tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-'))); 
...

如果要使其工作在VML中的可能性。您可以编写自己的功能，使同样的代码在buildText功能：

function softBreaks() 
     { 
      //if ie and vml 
      hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect; 
      if(!hasSVG) 
      { 
       //for each 
       $.each($('.highcharts-axis > span > div'), function(index, value) { 

        var width = value.parentNode.style.posWidth; 
        var div = value; 
        if (width) { 
         var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '), 
         tooLong, 
         actualWidth, 
         rest = []; 

         while (words.length || rest.length) { 

          //actualWidth = value.parentNode.offsetWidth; 
          actualWidth = value.parentNode.scrollWidth; 
          tooLong = actualWidth > width; 

          if (!tooLong || words.length === 1) { // new line needed 
           words = rest; 
           rest = []; 
           if (words.length) { 
            div = document.createElement("div"); 
            value.parentNode.appendChild(div); 
            if (actualWidth > width) { // a single word is pressing it out 
             width = actualWidth; 
            } 
           } 
          } else { 
           div.removeChild(div.firstChild); 
           rest.unshift(words.pop()); 
          } 
          if (words.length) { 
           div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-'))); 
          } 
         } 
        } 
       }); 
      } 
     }

并在此之后，当图表加载则必须调用此函数www.highcharts.com/ref/#chart-events--load（对不起，新用户）。如果您在页面上有多个图表，则可以将参数图表编号传递给softBreaks（）函数。

来源

2011-09-21 11:29:18 user956669

旋转的X轴标签与图形本身重叠

回答

相关问题