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、付费专栏及课程。

余额充值