从javascript数组中按索引返回始终相同的颜色

我有一个按钮，可以用chartjs生成一个图表饼图

根据插入的过滤器，我得到如下结果（名称|值%）：

有时某些结果不会出现，例如：

Service_1 |  20
Service_3 |  20
Service_4 |  60
...

我希望每次服务都使用相同的颜色。

比如说

Service_1 always #ccc
Service_2 always #fff
Service_3 always #000
etc...

现在我正在使用这个有用的解决方案：使用

但map不能像我需要的那样工作，因为如果结果中没有出现服务_2，则服务_3会得到#fff，而不是#000等等

我想纠正这一部分：

backgroundColor: palette('rainbow', json_results.length).map(function(hex) {
        return "#" + hex;
}) 

我有最多100个服务，所以我可以创建一个固定的100种颜色数组，例如。

---

但是我不知道如何映射正确的索引。

假设结果对象类似于

{service:'service_1'，value:10}

试试这个：

palette('rainbow', 100) // <--- create a palette with every color
    .reduce((c, n, i) =>  //    then pick only colors that match a service name using the palette color index
        [...c, ...(json_results.find(row => r.service == `Service_${i+1}`) ? [`#${n}`] : [])], [])

---

Hi i get error palette不是一个函数。你能用JSFIDLE发布你的代码吗？感谢您需要在代码上应用reduce函数。。。我的代码片段只是一个axampleAh ok。我从未使用过reduce，我不知道它是如何工作的。我将搜索文档

backgroundColor: palette('rainbow', json_results.length).map(function(hex) {
        return "#" + hex;
}) 

palette('rainbow', 100) // <--- create a palette with every color
    .reduce((c, n, i) =>  //    then pick only colors that match a service name using the palette color index
        [...c, ...(json_results.find(row => r.service == `Service_${i+1}`) ? [`#${n}`] : [])], [])