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刻度大多数时候不会显示出来，所以不能算是完美解决方案，只能算是应急方案。