highcharts圖表中級入門之xAxis label：X(橫)座標刻度值過長截斷多行(換行)顯示問題說明

在使用highcharts圖表的過程當中，總會碰到這樣一個非常棘手的問題，橫座標刻度值太長，在不換行顯示的狀況下顯得格外擁擠。雖然針對這一問題是能夠對其刻度值進行旋轉以此來避開顯示擁擠問題【如何讓highcharts圖表組件的X軸座標刻度旋轉屬性值rotation的透明分析】，但是仍是想對過長的刻度值進行必定長度的截取多行顯示。測試

針對上面這樣一個問題，對於highcharts圖表而言顯得不是那麼的困難，咱們須要將這個問題首先進行定位到xAxis的labels屬性節點上去，經過查找API，咱們不難發現label內有一個formatter方法能夠對其刻度值進行格式化而後return返回,通常性的寫法如： this

 
   01. 
   xAxis: { 
  
   02. 
   categories: ['Foo', 'Bar', 'Foobar'],             
  
   03. 
   labels: { 
  
   04. 
   //對橫座標刻度值進行格式化 
  
   05. 
   formatter: function() { 
  
   06. 
   return '<a href="'+ categoryLinks[this.value] +'">'+ 
  
   07. 
   this.value +'</a>'; 
  
   08. 
   } 
  
   09. 
   } 
  
   10. 
   },

咱們知道了formatter這樣一個格式化方法，也很容易地經過this.value獲取到刻度值，那麼咱們就不難將其進行必定規則性的截取而後以HTML格式返回。這裏提供一個符合需求的完整Demo示例代碼： google

 
   01. 
   $(function () { 
  
   02. 
   var categoryLinks = { 
  
   03. 
   'Foo': 'http://www.google.com/search?q=foo', 
  
   04. 
   'Bar': 'http://www.google.com/search?q=foo+bar', 
  
   05. 
   'Foobar': 'http://www.google.com/serach?q=foobar' 
  
   06. 
   }; 
  
   07. 
     
   08. 
   $('#container').highcharts({ 
  
   09. 
   chart: { 
  
   10. 
   }, 
  
   11. 
     
   12. 
   xAxis: { 
  
   13. 
   categories: ['測試橫座標過程問題', 'Bar', 'Foobar'], 
  
   14. 
     
   15. 
   labels: { 
  
   16. 
   formatter: function() { 
  
   17. 
   //獲取到刻度值 
  
   18. 
   var labelVal = this.value; 
  
   19. 
   //實際返回的刻度值 
  
   20. 
   var reallyVal = labelVal; 
  
   21. 
   //判斷刻度值的長度 
  
   22. 
   if(labelVal.length > 3) 
  
   23. 
   { 
  
   24. 
   //截取刻度值 
  
   25. 
   reallyVal = labelVal.substr(0,3)+"<br/>"+labelVal.substring(3,labelVal.length-1); 
  
   26. 
   } 
  
   27. 
   return reallyVal; 
  
   28. 
   } 
  
   29. 
   } 
  
   30. 
   }, 
  
   31. 
     
   32. 
   series: [{ 
  
   33. 
   data: [29.9, 71.5, 106.4]         
  
   34. 
   }] 
  
   35. 
   }); 
  
   36. 
   });

這樣第一個刻度就會分兩行顯示了的，這裏就不貼上效果查看地址了的，朋友們能夠本身copy下來測試一下就能夠了的。 spa