Fatal编程技术网

Javascript Setattribute文本参数

javascript html

Javascript Setattribute文本参数,javascript,html,Javascript,Html,我试图在动态创建的SVG图表中添加一个文本元素，以便生成标签，但无法使其正常工作 有一个WHILE循环用于为图表添加框。我对文本标签使用相同的while循环，但它不起作用，它会使框也失败。当我删除文本标签时，它可以完美地工作 非常感谢你的帮助 <svg id="mysvg" width="1000" height="800" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="50" y="60" fill=

我试图在动态创建的SVG图表中添加一个文本元素，以便生成标签，但无法使其正常工作

有一个WHILE循环用于为图表添加框。我对文本标签使用相同的while循环，但它不起作用，它会使框也失败。当我删除文本标签时，它可以完美地工作

非常感谢你的帮助

<svg id="mysvg" width="1000" height="800"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="60" fill="black" 
   font-family="Arial, Helvetica, sans-serif" 
   font-size="28">Revenue and Expenses</text>
<line x1="150" y1="80" x2="150" y2="320" 
   style="stroke:rgb(155, 144, 144);stroke-width:5" />
<script type="application/ecmascript"> 
  <![CDATA[
   var mysvg = document.getElementById("mysvg");

   var chartStart = [152, 84, 152]
   var chartWidth = [100,64,36]
   var chartNames = ["Revenue", "Expenses","Profit"]
   var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
   var num = chartNames.length;

   while (num-- > 0)
   {
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("x", chartStart[num]);
        rect.setAttribute("y", [num] * 70 + 100);
        rect.setAttribute("width", chartWidth[num]);
        rect.setAttribute("height", "50");
        rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");

    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text.setAttribute("x", "280");
        text.setAttribute("y", [num] *70 + 130);
        text.setAttribute("style", "fill:black");
        text.setAttribute("font-family", "Arial, Helvetica, sans-serif");
        text.setAttribute("font-size","18");
        text.setAttribute("textContent", chartNames[num]);

   mysvg.appendChild(rect);
   mysvg.appendChild(text);
 } 
]]>
</script>
</svg>


收支
0)
{
var rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.setAttribute（“x”，chartStart[num]）；
rect.setAttribute（“y”，[num]*70+100）；
setAttribute（“宽度”，chartWidth[num]）；
rect.setAttribute（“高度”、“50”）；
setAttribute（“样式”，“填充：”+chartColor[num]+“笔划：黑色；笔划宽度：0；不透明度：1”）；
var text=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
setAttribute（“x”、“280”）；
setAttribute（“y”，[num]*70+130）；
setAttribute（“样式”，“填充：黑色”）；
setAttribute（“字体系列”、“Arial、Helvetica、sans serif”）；
setAttribute（“字体大小”，“18”）；
setAttribute（“textContent”，chartNames[num]）；
mysvg.appendChild（rect）；
mysvg.appendChild（文本）；
} 
]]>
好的，找到了我自己的解决方案，我没有创建文本节点来附加到文本元素的值。使用下面的方法修复了它。我在分享，这样这个问题就不会没有答案。谢谢

<!DOCTYPE html>
<body>
<svg id="mysvg" width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="60" fill="black" 
   font-family="Arial, Helvetica, sans-serif" 
   font-size="28">Revenue and Expenses</text>
<line x1="150" y1="80" x2="150" y2="320" 
   style="stroke:rgb(155, 144, 144);stroke-width:5" />

<script type="application/ecmascript"> 
  <![CDATA[
   var mysvg = document.getElementById("mysvg");

   var chartStart = [152, 84, 152]
   var chartWidth = [100,64,36]
   var chartNames = ["Revenue", "Expenses","Profit"]
   var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
   var num = chartNames.length;

   while (num-- > 0)
   {
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("x", chartStart[num]);
        rect.setAttribute("y", [num] * 70 + 100);
        rect.setAttribute("width", chartWidth[num]);
        rect.setAttribute("height", "50");
        rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");

   var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
       label.setAttribute("x", "280");
       label.setAttribute("y", [num] *70 + 130);
       label.setAttribute("style", "fill:black");
       label.setAttribute("font-family", "Arial, Helvetica, sans-serif");
       label.setAttribute("font-size","18");
   var txt = document.createTextNode(chartNames[num]);
       label.appendChild(txt);

   mysvg.appendChild(rect);
   mysvg.appendChild(label);
 } 
 ]]>
    </script>
   </svg>
  </body>
</html>


收支
0)
{
var rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.setAttribute（“x”，chartStart[num]）；
rect.setAttribute（“y”，[num]*70+100）；
setAttribute（“宽度”，chartWidth[num]）；
rect.setAttribute（“高度”、“50”）；
setAttribute（“样式”，“填充：”+chartColor[num]+“笔划：黑色；笔划宽度：0；不透明度：1”）；
var label=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
label.setAttribute（“x”、“280”）；
label.setAttribute（“y”，[num]*70+130）；
label.setAttribute（“样式”，“填充：黑色”）；
label.setAttribute（“字体系列”、“Arial、Helvetica、sans serif”）；
label.setAttribute（“字体大小”，“18”）；
var txt=document.createTextNode（chartNames[num]）；
label.appendChild（txt）；
mysvg.appendChild（rect）；
mysvg.appendChild（标签）；
} 
]]>
检查控制台，这样你就可以在这里找到你的打字错误：
text.setAttribute（“style”，“fill”：black”）；
谢谢@Triby，这确实是个问题，但现在我已经更正为text.setAttribute（“style”，“fill:black”）；它仍然不起作用。我坚持，使用控制台查找错误，现在在这一行：
text.setAttribute（“y”[num]*70+100）；
setAttribute需要2个参数，而您只提供了1个参数。再次感谢@Triby发现了一个：）现在图表工作了，但仍然没有文本通过HMMM，当我检查其中一个文本元素时，它显示为
，所以它不知道有文本用textContent声明。我被难住了