angularJS库绘制条形图与对数刻度 [英] angularJS library for drawing bar charts with logarithmic scale

问题描述

我在找一个免费的图书馆（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.

这篇关于angularJS库绘制条形图与对数刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！