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

时间:2015-09-03 13:23:03

标签: javascript angularjs charts

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

1 个答案:

答案 0 :(得分: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),这是唯一将向最终用户展示的值。