highcharts图表:如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换

最新推荐文章于 2022-08-03 15:47:31 发布

超级侠哥

最新推荐文章于 2022-08-03 15:47:31 发布

阅读量6.2k

点赞数 1

最近有不少Highcharts图表用户在询问关于坐标轴刻度值数据过大会自动加上k,M,G,T,P,E一些单位字符的问题。这类问题开始一看还以为是坐标轴内刻度格式化formatter方法的问题，经过试验是行不通的。无奈之余看了看highcharts.js的源代码，通过CTRL+F查找"k"，看发现这些配置信息是由属性：numericSymbols控制着。源代码是这样写的：

1. ,decimalPoint:".",numericSymbols:"k,M,G,T,P,E".split(","),

将其在api.highcharts.comAPI文档内查找numericSymbols才得知其说明如下：

1. numericSymbols: Array<String>Since 2.3.0

2.

Metric prefixes used to shorten high numbers in axis labels. Replacing any of the positions with null causes the full number to be written. Setting numericSymbols to null disables shortening altogether. Defaults to [ "k" , "M" , "G" , "T" , "P" , "E"].

通过这一段英文描述大致可以看出来是这样一个意思：

1.

用于配置后缀以此缩短轴上刻度的大数据占位问题，让设置为null时，则不换算后缀加以替换。默认情况下是配置数组[ "k" , "M" , "G" , "T" , "P" , "E"]

这样一来我们想要让刻度大数据不换算单位就变得很好解决了。

highcharts图表中级入门之numericSymbols：如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换

1、配置lang内的numericSymbols属性值

在new Highcharts.Chart()前首先通过Highcharts.setOptions()设置全局变量，示例代码如下所示：

 
   1. 
   Highcharts.setOptions({ 
  
   2. 
   lang: { 
  
   3. 
   numericSymbols: null // 不换算单位 
  
   4. 
   } 
  
   5. 
   });

完整示例代码如下所示：

 
   01. 
   $(function () {  
  
   02. 
   Highcharts.setOptions({ 
  
   03. 
   lang: { 
  
   04. 
   numericSymbols: null 
  
   05. 
   } 
  
   06. 
   }); 
  
   07. 
     
   08. 
   $('#container').highcharts({ 
  
   09. 
   chart: { 
  
   10. 
   }, 
  
   11. 
   title:{ 
  
   12. 
   text:"如何让坐标刻度大数据不自动追加后缀k、M等符号示例" 
  
   13. 
   }, 
  
   14. 
   xAxis: { 
  
   15. 
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
  
   16. 
   }, 
  
   17. 
   yAxis: { 
  
   18. 
   type: 'logarithmic' 
  
   19. 
   }, 
  
   20. 
   credits:{ 
  
   21. 
   text:"www.stepday.com", 
  
   22. 
   href:"http://www.stepday.com", 
  
   23. 
   style:{ 
  
   24. 
   color:"red" 
  
   25. 
   } 
  
   26. 
   },         
  
   27. 
   series: [{ 
  
   28. 
   data: [0.029, 71.5, 1.06, 1292, 14400, 1.760, 135, 1480, 0.0216, 0.194, 9.56, 54.4]         
  
   29. 
   }] 
  
   30. 
   }); 
  
   31. 
   });