需要使用Raphael绘制此图表

Question

我是Raphael插件的新手，任何人都可以帮我用raphael（http://raphaeljs.com/）绘制这个图表

更新：我使用Raphael http://jsfiddle.net/LG5zn/64/创建的图表的小提琴链接 - 我希望所有元素都可以调整大小。

var paper = Raphael(50, 50, 500, 500);

var rect = paper.rect(10,10, 400, 400);

var rect1 = paper.rect(10,10, 200, 200);

var rect2 = paper.rect(210,210, 100, 100);

var rect3 = paper.rect(135,310, 275, 100);

var t = paper.text(100, 100, "Thermal");

var t2 = paper.text(250, 250, "Corona");

var t3 = paper.text(275, 350, "Arcing");


t.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });

t2.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });

t3.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });


rect2.attr("fill", "#93cede");

rect1.attr("fill", "#72E768");

rect3.attr("fill", "#006ABD");

Answer 1

好的 DEMO 可以帮助您完成项目。只需将此示例中所需的任何内容应用于您的代码即可。 祝你好运

它使整个事物可以拖动，同时点击小方块并调整大小。

var R = Raphael("canvas", 500, 500),
    c = R.rect(100, 100, 100, 100).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    s = R.rect(180, 180, 20, 20).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        }),

// the rest is in the DEMO

另外，有关详细信息，请查看 Raphael's free transform. 这真的很棒！