jquery - g.raphael または jquery svg を使用して、2 つの異なるスケールの折れ線グラフを作成するにはどうすればよいですか?

Question

ここのグラフに似たトルク曲線をプロットする必要があります。どんな提案でも大歓迎です。ありがとうございました！

Answer 1

次のように、独自の軸オブジェクトを作成できます。(このスニペットのソース/要点の URL を失ったため、期限が来ている場所でクレジットを与えることはできません)

axis = r.g.axis(85,230,310,null,null,4,2,["1",  "2", "3", "4"], "|", 0);
axis.text.attr({font:"12px Arial", "font-weight": "regular", "fill": "#333333"});
// y-axis denoted by setting orientation to 1 
axis2 = r.g.axis(40,230,300,0,400,10,1);

したがって、2 つのシリーズで正規の折れ線グラフを作成し、別の軸を描画します

それ以外の場合は、複数の軸を設定してからラベルを微調整してください:-

var lines = r.g.linechart(10, 10, 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: "1 1 1 1", symbol: "o", smooth: true});
lines.axis[0].text.items[3].attr('text','my label');

Answer 2

http://g.raphaeljs.com/linechart.html

無関係な 3 つのグラフを削除したスクリプトを次に示します。

        window.onload = function () {

            var r = Raphael("holder");

            r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, 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.g.text(160, 10, "Symbols, axis and hover effect");

（関数 （） {

            var lines = r.g.linechart(10, 10, 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: "o", smooth: true}).hoverColumn(function () {

                this.tags = r.set();

                for (var i = 0, ii = this.y.length; i < ii; i++) {

                    this.tags.push(r.g.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();

            });

            lines.symbols.attr({r: 3});

            // lines.lines[0].animate({"stroke-width": 6}, 1000);

            // lines.symbols[0].attr({stroke: "#fff"});

            // lines.symbols[0][1].animate({fill: "#f00"}, 1000);

        };

    </script>