解决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

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

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