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