如何解决使用 javascript 制作基于隐藏输入的直方图基本 js,无库
我正在尝试基于 HTML 隐藏输入值字符串制作直方图,然后通过 JS 代码将其转换为带有 Rect 子元素的 SVG。它开始看起来很好,但我坚持让矩形出现在 SVG 元素内。如果可能的话,我想要一些帮助。
HTML 代码:
<body onload="CreateGraph()">
<figure id="fg1">
<input id="myInput" type="hidden" value="1 1 1 1 4 4" name="string" />
<figcaption><br />חנויות אופניים<figcaption>
</figure>
这是我迄今为止设法制定的 Javascript:
函数 CreateGraph() {
var array=document.querySelector("#myInput").value;
var arraySplit= array.split(' ');
console.log(arraySplit);
var histogram = document.getElementById("fg1");
histogram += '<svg id="sv1">';
console.log(histogram);
for (var i = 0; i < array.lenght; i++) {
histogram += '<rect class="hist">';
console.log(histogram);
}
histogram += "</svg>";
}
这是另一个不顺利的版本:
function CreateGraph() {
var array=document.querySelector("#myInput").value;
var arraySplit= array.split(' ');
console.log(arraySplit);
var figure = document.getElementById("fg1");
console.log(figure);
HistogramBG = document.createElement("svg");
HistogramBG.setAttribute("id","sv1");
console.log(HistogramBG);
figure.appendChild(HistogramBG)
console.log(figure);
var histogramBars;
var value = 0;
for (var i = 0; i < array.lenght; i++)
{
var value = value + array[i];
console.log(value);
histogramBars = document.createElement("rect")
histogramBars.setAttribute("class","hist");
histogramBars.setAttribute("x",5)
histogramBars.setAttribute("y",5)
histogramBars.setAttribute("witdh",10)
histogramBars.setAttribute("height",50)
console.log(histogramBars)
HistogramBG.appendChild(histogramBars);
console.log(histogramBars)
}
}
如果可以,请帮助我!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。