graphael图表的轴名称

Question

我在stackoverflow上发现了很多类似的问题，但我没有一个可以使用的。我不能在我正在使用的graphael折线图上的x轴下写入轴标签。

您知道如何显示轴标签吗？

我的代码如下所示：

        window.onload = function () {
            var r = Raphael("holder"),
                txtattr = { font: "12px sans-serif" };

            var x = [], y = [], y2 = [], y3 = [];

            for (var i = 0; i < 1e6; i++) {
                x[i] = i * 10;
                y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
                y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5;
                y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4;
            }

            r.text(160, 10, "Simple Line Chart (1000 points)").attr(txtattr);
            r.text(480, 10, "shade = true (10,000 points)").attr(txtattr);;
            r.text(160, 250, "shade = true & nostroke = true (1,000,000 points)").attr(txtattr);
            r.text(480, 250, "Symbols, axis and hover effect").attr(txtattr);

            r.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function () {
                this.set = r.set(
                    r.circle(this.x, this.y[0]),
                    r.circle(this.x, this.y[1]),
                    r.circle(this.x, this.y[2])
                );
            }, function () {
                this.set.remove();
            });

            r.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], { shade: true });
            r.linechart(10, 250, 300, 220, x, [y, y2, y3], { nostroke: true, shade: true });

            var lines = r.linechart(330, 250, 300, 220, [[1, 2, 3, 4, 5, 6, 7], [3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
                this.tags = r.set();

                for (var i = 0, ii = this.y.length; i < ii; i++) {
                    this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
                }
            }, function () {
                this.tags && this.tags.remove();
            });

Answer 1

显示的代码是示例中的代码。每个r.linechart都会创建一个新图表。要添加轴，您需要在选项中指定它，在您的情况下：

r.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function () {
                this.set = r.set(
                    r.circle(this.x, this.y[0]),
                    r.circle(this.x, this.y[1]),
                    r.circle(this.x, this.y[2])
                );
            }, function () {
                this.set.remove();
            });

需要有

r.linechart(10, 10, //top left
            300, 220, //bottom right
            x, //x values
            [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)], //y values (note added ',')
            { axis: "0 0 1 1" //here you can additional things, e.g. symbol, colors,...
            }
            ).hoverColumn(function () {
                this.set = r.set(
                    r.circle(this.x, this.y[0]),
                    r.circle(this.x, this.y[1]),
                    r.circle(this.x, this.y[2])
                );
            }, function () {
                this.set.remove();
            });

此示例需要

            r.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], { shade: true, axis :"1 1 0 0" });

诸若此类。‘'axis："0 0 1 1“”在左侧和底部绘制轴，而

‘'axis："1 1 0 0"’绘制顶部和右侧的轴。