更改拉斐尔折线图中的最小和最大y轴值 [英] change min and max y-axis values in a raphael linechart
问题描述
考虑以下代码(对不起，我无法将其放在jsfiddle上):
Consider the following code (sorry I was not able to put it on jsfiddle):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.bar.js"></script>
<script src="g.line-min.js"></script>
<body>
<div style="width:500px;height:150px" id="div"></div>
<script>
var r = Raphael("div",400,150),
fin = function () {
this.flag = r.popup(this.x, this.y, this.value || "0").insertBefore(this).attr([{fill: "#bbbbbb"}]);
},
fout = function () {
this.flag.animate({opacity: 0}, 300, function () {this.remove();});
},
txtattr = { font: "12px sans-serif" };
var rr=r.linechart(0, 0, 400, 125, [0,1,2,3,4],[250,200,350,100,300], {axis: '0 0 1 0',axisxstep:4,symbol:'circle',width:1}).hoverColumn(fin, fout);
rr.axis[0].attr([{fill: "#bbbbbb"}]);
</script>
</body>
我想将y轴从0开始并在数据系列最大值上方结束，以便正确显示工具提示. 如何设置y轴的最小值和最大值以覆盖默认行为.
I want to start y-axis at 0 and finish above the data series max value so that the tooltip is displayed rightly. How can I set y-axis min and max values overriding default behaviour.
推荐答案
gRaphael无法做到这一点.实际上，似乎在Raphael或gRaphael上没有任何活跃的开发或维护.
gRaphael provides no way to do this. In fact, it doesn't seem like there any active development or maintenance on Raphael or gRaphael.
因此，唯一的方法就是入侵 g.line.js .您需要的值在109-114行上:
So the only way to do this, is to hack g.line.js. The values you're after is on line 109-114:
xdim = chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
minx = xdim.from,
maxx = xdim.to,
ydim = chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
miny = ydim.from,
maxy = ydim.to,
值xdim和ydim定义图表相对于绘制值的范围. .snapEnds()返回的对象采用以下形式:{ from: INT, to: INT, power: INT }.我不知道power部分的作用，但是 g.line.js 中没有使用它，因此您可以放心地忽略它.您要编辑from和to属性.让我们向您展示这些选项:
The value xdim and ydim defines the range of your chart in relation to your plotted values. The object returned by .snapEnds() takes this form: { from: INT, to: INT, power: INT }. I have no idea what the power part does, but it isn't used in g.line.js, so you can safely ignore it. What you want is to edit the from and to properties. Let's expose those to your options:
xdim = opts.xdim || chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
minx = xdim.from,
maxx = xdim.to,
ydim = opts.ydim || chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
miny = ydim.from,
maxy = ydim.to,
您现在可以从Paper.linechart()选项对象中更改值:
You can now change the values from your Paper.linechart() options object:
paper.linechart(0, 0, w, h, x, y, {
xdim: { from: 0, to: 100 },
ydim: { from: 0, to: 100 }
});
我希望这对您有用！
使用它时，您可能需要修复此错误允许在 g.line.js 中也将opts.gutter设为零.或者，您可以使用此修复程序来允许您的线图在其中留空 .
While you're at it, you might want to fix this bug allowing opts.gutter to equal zero in g.line.js as well. Or you might use this fix to allow your linecharts to have a gap in them.
这篇关于更改拉斐尔折线图中的最小和最大y轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
