1

私はHighchartsSVGを使用しています。グラフの結果は 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>で私の要素だけです。 クロムコンソールを使用してこの要素にカーソルを合わせると、rec on が表示されます。DOMattrx-0 , y=0

ここに画像の説明を入力

jquery は svg 要素を追加しないという考えがありますが、私は間違っています

質問jqueryを使用してSVGに属性を持つ要素を追加するにはどうすればよいですか

編集

助けを借りidて要素を持っているので、を使用しrectて追加しようとしましたが、失敗しましたattrid

スクリーンショット

4

3 に答える 3

5

Highcharts には、長方形の描画に使用できる描画 API もあります。これは VML でも機能します。http://www.highcharts.com/ref/#renderer => http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/treeで rect とライブ サンプルをチェックしてください/master/samples/highcharts/members/renderer-rect-on-chart/ .

于 2012-06-27T05:03:39.520 に答える
2

ここに表示されているように、属性はrxありません。 ry、に変更してみてxください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';

次に、通常のルートで rect を追加します。

生の dom 要素があるため、他のプロパティもそこに割り当てることができる場合があることに注意してください。例えば：

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