javascript - 用于绘制具有对数刻度的条形图的 angularJS 库

Question

我正在寻找一个免费的库(麻省理工学院许可证并与 angularJS 兼容)，它允许我绘制条形图设置一些属性，特别是轴的对数刻度(因为我在 y 轴的值之间有巨大的差距).我试过 angular-nvd3.js但它不允许设置对数刻度。有什么建议吗？

Answer 1

我用一个小“技巧”​​解决了我的问题:将值转换为对数值但显示原始值。在代码中(我使用 angular-nvd3.js):

<nvd3 options="options" data="myData"></nvd3>

这是html中图表的定义。在 Angular Controller 中:

$scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 250,
            width: 400,

            showXAxis: false,
            valueFormat: function (d) {
                return d3.format(',.3f')(d);
            },
            rightAlignYAxis: true,
            useInteractiveGuideline: false,
            tooltips: true,
            tooltipContent: function (key, x, y, e, graph) {
                return '<table> <tr> <td>' + x + ':</td><td> <b>' + (Math.pow(10,e.value)-1).toFixed(3) + '</b></td></tr></table>'
            },
            showYAxis: false,
            x: function (d) { return d.label; },
            y: function (d) {return d.value > 0 ? (Math.log(d.value + 1) / Math.LN10) : 0 },
            color: ['#4682B4']
        }
    };

通过这种方式我解决了值之间巨大差距的问题(感谢Math.log)而不丢失原始值(感谢Math.pow)，唯一将显示给最终用户的那些。