Question

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

基于插入的过滤器，我得到的结果类似于（名称|值％）：

Service_1 |  10
Service_2 |  15
Service_3 |  75

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

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

我希望每种服务始终使用相同的颜色。

例如

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

现在我正在使用此有用的解决方案：使用http://google.github.io/palette.js/

//json_labels are for Name
//json_results are for Value%

var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: json_labels,
        datasets: [{
            label: '',
            data: json_results,
            backgroundColor: palette('rainbow', json_results.length).map(function(hex) {
    return "#" + hex;
            })
         }],
      ...

但是，如果Service_2未出现在结果中，则地图无法按我的需要工作，因此Service_3获得#fff而不是＃000，依此类推...

我想更正这一部分：

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

我最多可以使用100个服务，因此我可以创建固定100种颜色的数组。但是我不知道要映射正确的索引。

Answer 1

假设结果对象就像{ 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}`] : [])], [])

var palette = Array(100).fill().map((_, i) => `${i}`.padStart(6, '0'));

json_results = [{
  service: 'Service_12', value: 9
  }, {
  service: 'Service_54', value: 10
}]

var mapped = palette
  .reduce((c, n, i) => 
    [...c, ...(json_results.find(r => r.service == `Service_${i+1}`) ? [`#${n}`] : [])], [])

console.log(mapped)

根据索引从JavaScript数组返回总是相同的颜色

1 个答案: