更改 raphael 折线图中的最小和最大 y 轴值答案

【问题标题】：change min and max y-axis values in a raphael linechart更改 raphael 折线图中的最小和最大 y 轴值
【发布时间】：2014-01-03 05:00:14
【问题描述】：

考虑以下代码（抱歉，我无法将其放在 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>

我想从 0 开始 y 轴并在数据系列最大值之上完成，以便正确显示工具提示。如何设置覆盖默认行为的 y 轴最小值和最大值。

【问题讨论】：

标签： linechart graphael

【解决方案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。

【讨论】：