小编ste*_*iok的帖子

我正在尝试使用 css 和 html 创建饼图。我只会显示一些静态数字，因此我试图保持它相对简单并且不使用任何动画。

我目前在如何创建我想要的外观方面遇到了障碍。下面的代码片段完全按照我的conic-gradient意愿工作，这个问题是firefox 和 Internet Explorer 不支持的，这将是这个项目的一个问题。

.progress-circle {
  --d: 50px;
  --color: #002F65;
  --progress: 40;
  border-radius: var(--d);
  height: var(--d);
  width: var(--d);
  background: conic-gradient( var(--color) calc(calc(var(--progress) / 100) * 360deg), transparent calc(calc(var(--progress) / 100) * 360deg));
}

<div class="progress-circle"></div>

我一直在寻找类似于上面的示例的替代方案，这使我看到了这篇文章：用 css 设计简单的饼图

我的问题是计算饼图百分比增长的方法似乎与我想要完成的不兼容。因为它是由transform: rotate(.1turn);

我的主要问题是否可以conic-gradient与其他浏览器兼容？如果不是，那么使用 css 制作饼图以与第一个示例非常相似的最佳方法是什么？

对于上下文，我将从数组中传递数据以确定饼图的百分比。

.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image:
  linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
  content: "";
  display: block; …

我有一个数组categories，它的值id我试图与我的数组匹配articles

如果articles有一个匹配的 id 与我喜欢的其中之一，categories会将它们合并到一个数组中。我可以将这些对象添加到数组中，但它们根据 id 不匹配。

以下是类别的示例：

const categories = [{results: 
    { 
      "id": 28,
      "name": "Articles"
    }, { 
      "id": 76,
      "name": "Projects"
    }
    }]

以下是文章示例：

const articles = [ 
{
 "title": "first article",
 "content": "lorem ipsum",
 "categoryId": 28
},
{
 "title": "second article",
 "content": "lorem ipsum",
 "categoryId": 28
},
{
 "title": "thirdarticle",
 "content": "lorem ipsum",
 "categoryId": 76
},
]

我正在尝试将两个数组合并为一个。如果可能的话，我希望该articles数组成为该匹配索引中的数组。例如：

 const combined = [
      {
        "id": 28,
        "name": "Articles", …

我有一个数组topArr，我试图获取结果对象的总和。我使用该.reduce()方法来完成此任务。然后我声明另一个变量以等于逗号位置的总和。

下面我有两个尝试代码片段示例。

首先，我得到的返回值为[object Object]48,883。

第二个例子，我得到数组中第一个数字的返回值，它没有组合另一个对象。

我期望两个结果加起来等于金额543,810

这是我的代码片段。

let topArr = [
        { result: "494,927", risk: "HIGH", sector: "Online" },
        { result: "48,883", risk: "HIGH", sector: "Retail Stores" },
    ],
    
 sum = topArr.reduce(function (a, e) {
        return a + Number(e.result.replace(/(,\s*)+/g, '').trim());
    })

    let sumComma = sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    console.log(sumComma)

let topArr = [
        { result: "494,927", risk: "HIGH", sector: "Online" },
        { result: "48,883", risk: "HIGH", sector: "Retail Stores" },
    ],
    
 sum = topArr.reduce(function (e) …