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