angularJS库绘制条形图与对数刻度对数、刻度、条形图、angularJS

2023-09-13 05:18:54 作者:稳场

我在找一个免费的图书馆(MIT许可证和angularJS兼容),让我画BARCHART设置一些特性,尤其是对数刻度线(因为我在Y轴值之间的巨大差距)。我试着用角nvd3.js 但它不允许设置对数规模。任何建议?

I'm looking for a free library (MIT License and compatible with angularJS) that allows me to draw BarChart setting some properties, in particular a logarithmic scale for axis (because I have a huge gap between values in the y-Axis). I tried with angular-nvd3.js but it doesn't allow to set the logarithmic scale. Any suggestion?

推荐答案

我解决我的问题一个小绝招:转换值的对数值,但显示原始值。在code(我用角nvd3.js):

I solved my problem with a little "trick": convert values in logarithmic values but show original values. In code (I use angular-nvd3.js):

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

这是HTML表的定义。在角度控制器:

This is the definition of chart in html. In the 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 ),而原始值(感谢输给数学。 POW ),唯一的将被显示给终端用户。

In this way I solved the problem of huge gap between values (thank to Math.log) without losing original values (thanks to Math.pow), the only ones that will be shown to the end user.