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