Question

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

Answer 1

我用一点“技巧”解决了我的问题：转换对数值但显示原始值的值。在代码中（我使用angular-nvd3.js）：

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

这是html中图表的定义。在角度控制器中：

$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），这是唯一将向最终用户展示的值。

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

1 个答案: