Question

请考虑以下代码（抱歉，我无法将其放在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轴最小值和最大值覆盖默认行为。

Answer 1

gRaphael无法做到这一点。事实上，Raphael或gRaphael似乎没有任何积极的开发或维护。

所以唯一的方法就是破解 g.line.js 。您之后的值在第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属性。让我们来看看这些选项：

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()选项对象中的值：

paper.linechart(0, 0, w, h, x, y, {
    xdim: { from: 0, to: 100 },
    ydim: { from: 0, to: 100 }
});

我希望这适合你！

虽然您正在使用它，但您可能想要修复this bug allowing opts.gutter to equal zero in g.line.js as well。或者你可以use this fix to allow your linecharts to have a gap in them。

在raphael折线图中更改最小和最大y轴值

1 个答案: