1

我正在使用Highcharts，图表结果是 SVG 元素的集合，我试图SVG使用 jquery向其中添加一些元素

这是我尝试过的

function(chart) { // on chart load complete 
  $("#highcharts-0 Svg").
   append(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
   $("#highcharts-0 Svg").find("rect").
   attr({x : 100 , y:100 , width : 100 , height : 100 });
   console.log($("#highcharts-0 Svg "));
                  });

我真的不能说这是否有效，我所能看到的只是<rect></rect>我的一个元素DOM，没有attr 其他通知是当我使用 chrome 控制台将鼠标悬停在这个元素上时，它会显示记录x-0 , y=0，

在此处输入图像描述

我有一个想法，jquery 不附加 svg 元素 hop 我错了

问题如何使用 jquery 将具有属性的元素添加到 SVG

编辑

现在有了帮助，我有了id元素，rect然后我尝试attr使用添加id，但失败了

截屏

4

3 回答 3

5

Highcharts 还有一个绘图 API，可用于绘制矩形。这也适用于 VML。在http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree查看http://www.highcharts.com/ref/#renderer => rect 和实时示例/master/samples/highcharts/members/renderer-rect-on-chart/。

于 2012-06-27T05:03:39.520 回答
2

正如您在此处看到的，没有属性rxand ry，尝试将其更改为xand y。

于 2012-06-26T19:34:55.417 回答
1

矩形具有 x 和 y 属性。rx 和 ry 用于圆圈。

另外，你确定你的选择器是正确的吗？您可能想要小写“Svg”

** 编辑 ** 屏幕截图中的矩形没有分配任何属性。没有宽度或高度，或 x/y 位置。您应该尝试在附加矩形时给它一个 id，并使用相同的 id 查询它。

请参阅： https ://developer.mozilla.org/en/DOM/document.createElementNS

你可以这样做：

var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
rect.id = 'your_id_here';

然后通过正常路线附加矩形。

请注意，由于您拥有原始 dom 元素，因此您也可以在那里分配其他属性。例如：

rect.x = 100;
rect.y = 100;
rect.fill = 'blue';
于 2012-06-26T19:38:34.983 回答