文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG信息图WHILE，WHILE，WHILE

问SVG信息图WHILE，WHILE，WHILE
EN

Stack Overflow用户
提问于 2020-02-21 04:32:01
回答 2查看 54关注 0票数 1

我正在尝试创建一个信息图，它在一个表中创建36个圆，其中圆的颜色是从36除以数据集中的百分比值得出的。

* EDIT -我已更改为没有循环的工作脚本*

我已经让变量正确工作了，它现在知道on_value是15 (36 * input_data.metric_value百分比为0.42)，off_value是21，平方是36。我将100%设为36，因为我可以很容易地被2和3整除。

我还知道我的四舍五入函数工作正常。

下面的脚本现在生成一个圆圈。然而，我想实现的逻辑是，它使用第一种颜色为前15个圆创建36个圆，然后在循环过程中更改为下一个21个圆的第二种颜色。

我认为它应该在每行中循环6次列，并循环6行，总共36行。

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<body>

<svg id="mysvg" height="310" width="250">
   <text x="125" y="260" fill="#FF9900"
        font-family="Arial, Helvetica, sans-serif"
        text-anchor="middle"
        font-size="42">42%</text>

  <text x="125" y="290" fill="#FF9900"
        font-family="Arial, Helvetica, sans-serif"
        text-anchor="middle"
        font-size="28">PROFITABLE</text>

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

      var input_data = {performance_metrics: [
        {metric_name: "Profitability",
         metric_value: 0.42}
        ]};

      var on_value = 0;
      var off_value = 0;

   input_data.performance_metrics.forEach(e=>{
     on_value = Math.round(36 * e.metric_value)
     off_value = 36 - on_value});

   var square = 36; 
   var row = 1;
   var col = 1;
   var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
         circle.setAttribute("cx", 20 + (1 * 30));
         circle.setAttribute("cy", 20 + (1 * 30));
         circle.setAttribute("r", "10");
          if (square < on_value) {
            circle.setAttribute("style", "fill","#FF9900");
            circle.setAttribute("stroke","black");
            circle.setAttribute("stroke-width","0")
            circle.setAttribute("opacity","1");
              }
          else {
            circle.setAttribute("style", "fill","#E8E8E8");
            circle.setAttribute("stroke","black");
            circle.setAttribute("stroke-width","0")
            circle.setAttribute("opacity","1")};



  mysvg.appendChild(circle);

  function formatNumber(num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }

   ]]>
</script>
</svg>

</body>

​

完成后的输出应该与本文中的图像类似

​

​

我从手工创建svg开始，然后致力于使用while look创建它。下面是它显式工作的代码

代码语言：javascript
复制
<svg height="310" width="250">
  <text x="125" y="260" fill="#FF9900"
   font-family="Arial, Helvetica, sans-serif"
   text-anchor="middle"
   font-size="42">42%</text>

 <text x="125" y="290" fill="#FF9900"
   font-family="Arial, Helvetica, sans-serif"
   text-anchor="middle"
   font-size="28">PROFITABLE</text>

 <circle cx="50" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="80" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="110" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="140" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="170" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="200" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />

 <circle cx="50" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="80" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="110" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="140" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="170" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="200" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />

 <circle cx="50" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="80" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="110" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
 <circle cx="140" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="170" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="200" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />

 <circle cx="50" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="80" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="110" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="140" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="170" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="200" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />

 <circle cx="50" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="80" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="110" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="140" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="170" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="200" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />

 <circle cx="50" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="80" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="110" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="140" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="170" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 <circle cx="200" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
 Sorry, your browser does not support inline SVG.  
</svg>

on_value的计算是四舍五入(36×performance_metrics.metric_value)

42% = 15点。

我把它设为6x6，因为你可以除以2和3。

在列循环1-6的内部有行循环1-6

将颜色设置为颜色1(橙色)，直到计数1到36超过15，然后设置颜色2(灰色)

圆x是20 +(行循环值x 30)圆y是20 +(列循环值x 30)

圆半径为10

svg
javascript
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-21 09:23:44

如果你正在为创建圆的网格而苦苦挣扎，你可以用2for循环来实现。

​

代码语言：javascript
复制
var mysvg = document.getElementById("mysvg");
//mysvg.setAttribute('height', 500)

var data = 0.42

var gridWidth = 6;
var gridHeight = 6;
var circleRadius = 10;
var count = 0

for (let i = 0; i < gridWidth; i++) {
  for (let j = 0; j < gridHeight; j++) {
    count++
    var isFilled = count / (gridWidth * gridHeight) > data
    var circle = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );
    circle.setAttribute("cx", 20 + j * 30);
    circle.setAttribute("cy", 20 + i * 30);
    circle.setAttribute("r", circleRadius);
    circle.setAttribute("fill", isFilled ? 'blue' : 'red');
    mysvg.appendChild(circle);
  }
}
代码语言：javascript
复制
<!-- <svg id="mysvg"></svg> -->
<svg id="mysvg" viewBox="0 0 200 200" style="width:100%;"></svg>

​

票数 1
EN

Stack Overflow用户

发布于 2020-02-21 05:16:58

有几个小错误和一个大错误。小错误首先在第41和42行，你在结尾漏掉了一个")“。在第45 & 48行，您在括号中途切换到了css语法。但是你最大的问题是在第44行，on_value在第26行的一个函数中被标识，因此在它之外是看不到的。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60328063

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档