2
对于最简单的用例,一个值在-10到10之间的条形图,我们如何使用Protovis JavaScript图表库来干净地编码?在Protovis中绘制负数的正确方法是什么?
干净地说,我的意思是居中对齐轴,显示x和y轴标签,并且表示图表的列值,其中负值落在y轴下且正值超过y轴。
对于最简单的用例,一个值在-10到10之间的条形图,我们如何使用Protovis JavaScript图表库来干净地编码?在Protovis中绘制负数的正确方法是什么?
干净地说,我的意思是居中对齐轴,显示x和y轴标签,并且表示图表的列值,其中负值落在y轴下且正值超过y轴。
这里有一个工作示例:是http://jsfiddle.net/nrabinowitz/yk5By/3/
这样做的重要组成部分如下:
制作的X轴的比例从最小值到您的最大值会(在你的情况,这将是pv.Scale.linear(-10,10).range(0,w)
;在我的例子中,我根据数据计算最小值和最大值)。
基座上的基准的绝对距离的条的从0宽度:
.width(function(d) { return Math.abs(x(d) - x(0)); })
然后调整基于所述基准是正还是负的.left()
属性:
.left(function(d) { return d > 0 ? x(0) : x(0) - this.width(); });
因为我们使用的是简单的x轴刻度,所以添加轴标签是非常容易的:
vis.add(pv.Label)
.data(x.ticks()) // you could also use pv.range(min, max, 1) here
.left(x);
比我能想出来的要干净得多。尼斯。完整答案。谢谢。 –