解决c3.js 低版本 axis.y.type 无法设置log(对数坐标)

场景

在数据可视化中经常会遇到改变坐标轴的类型的场景，通常情况下我们使用的是算数坐标轴，也就是普通的笛卡儿坐标,横纵的刻度都是是等距的.举例来说：如果每1cm的长度都代表2,则刻度按照顺序0,2,4,6,8,10,12,14…

但是遇到某一轴value范围特别大的时候，则需要用对数坐标来将大数值集中显示在某一区域中，以方便查看整体趋势。

简单的介绍一下对数坐标系统:坐标轴是按照相等的指数增加变化表示的.举例来说：如果每1cm代表10的1次方增加,则坐标轴刻度的表示依次为1,10,100,1000,10000…… 算数坐标系较对数坐标系,他们区别体现于等刻度值增长方式不同,一个均匀增长,一个对数增长.

问题

在项目中使用的c3.js版本较低，而将纵坐标设置为对数坐标的配置项在v0.7.9中才有发布。于是只能寻求自行计算转换成对数数值的方法进行配置。

image.png

解决方案

github上有搜到类似的issue，但是多数忽略了原数值为0的情况，所以在原来的解决方案上加了点改进

data_test_original = ['data1', 10, 1, 1000, 3, 500, 50, 5, 3000];
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
         if(data_test_original[i]){
                if(data_test_original[i] == 1){
                   data_test[i] = 0.1;
                 }
                else{
            data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
          }
     }
         else
              data_test[i] = 0;      
 }
var chart = c3.generate({
        bindto: '#c3-chart',
    size: {
        height: 240,
        width: 480
    },
    data: {
        type:"bar",
        columns: [
          data_test
        ]
    },
    axis : {
        y : {
            show:true,
            tick:{
              values:function(){
                return _.range(0,Math.max(...data_test.slice(1))+1,1)
              },
              format:function(d){
                 return d == 0 ? 0 : Math.pow(10,d).toFixed(0);
              }
            }
        }
    }
});

如果需要对y轴的数值格式化，只需要做如下类似设置即可

this.data['axis']['y']['tick']['format'] =  function (d) {
    return  d === 0 ? '0.00%' : `${(Math.pow(10, d) / 100).toFixed(2)}%`;
};

最后编辑于：2020.02.03 11:26:43