Highcharts：在对数坐标系中显示零

1、在Highcharts中设置对数坐标系：

1 2 3

yAxis: {\\or xAxis                  type: 'logarithmic' }

2、在对数坐标系中显示0：

如果某个数据点，在对数坐标轴上的坐标是0，将被Highcharts自动处理成null，从而不在图上显示。（3.0版之前会报错）

例如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(function () {   $('#container').highcharts({     yAxis: {       // Y轴采用对数坐标轴       type: 'logarithmic'     },     tooltip: {        headerFormat: '<b>{series.name}</b><br />',        pointFormat: 'x = {point.x}, y = {point.y}'         },                       series: [{                         data: [1, 2, 0, 8, 16, 32, 0,         128, 256, 0, 512]        }]     }); });

上面的例子里，series[0].data里有若干个零，在对数坐标轴的默认情况下，这些0点不会显示在图表上，造成图表的线不连续。如下图所示：

图1

为了正常生成0的点，可以将0替换成一个非常接近0的小数，当操作图表时，将这个小数作为0显示。代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(function () {   $('#container').highcharts({     // Y轴采用对数坐标轴     yAxis: {       type: 'logarithmic'     },     tooltip: {       formatter: function(){         //反向处理，将0.000001转为0显示         if(this.y === 0.000001) return 0;         return this.y;       }     },     series: [{       //将0替换成0.000001，使其能在图上画出来       data: [1, 2, 0.000001, 8, 16, 32, 0.000001,         128, 256, 0.000001, 512]     }]   }); });

上面的例子里，0点可以正确画出，并且鼠标经过时，会提示该点是0。但到这里，左侧坐标轴的刻度数值会出现问题，如下图所示：

图2

为了刻度正确，还要重新判断一下刻度值，完整代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

$(function () {   $('#container').highcharts({     // Y轴采用对数坐标轴     yAxis: {       type: 'logarithmic',       labels: {         //格式化坐标轴，避免坐标轴的小数刻度出现异常         formatter: function(){           if(this.value === 0.000001) return 0;           if(this.value < 1) return '';           return this.value;         }       }     },     tooltip: {       formatter: function(){         //反向处理，将0.000001转为0显示         if(this.y === 0.000001) return 0;         return this.y;       }     },     series: [{       //将0替换成0.000001，使其能在图上画出来       data: [1, 2, 0.000001, 8, 16, 32, 0.000001,         128, 256, 0.000001, 512]     }]   }); });

完整代码生成的图示：

​

图3

总结

上述方法的完整思路为：

1、将0替换成一个接近0的小数，比如0.000001

2、在tooltip中反向处理，将0.000001都显示为0

3、使用过小的小数，容易造成坐标轴的label值出现异常，所以要将坐标值上0.000001刻度显示为0，其他小于1的刻度都不显示。

使用以上代码，坐标轴的0刻度大多数时候不会显示出来，所以不能算是完美解决方案，只能算是应急方案。