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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值