如何为chartjs-chart-treemap中的每个数据点设置颜色答案

【问题标题】：how to set color for each datapoint in chartjs-chart-treemap如何为chartjs-chart-treemap中的每个数据点设置颜色
【发布时间】：2021-12-05 01:07:30
【问题描述】：

我正在使用 chartjs-chart-treemap v2.0 和 chartsjs 3.6 生成树形图。我似乎无法找到如何设置每个框的颜色。我希望在这里找到它：

.....
 datasets: [{
      tree: Data.statsByState,
      key: 'area',
      groups: GROUPS,
      spacing: 1,
      borderWidth: 0.5,
      borderColor: 'rgba(200,200,200,1)',
      backgroundColor: 'rgba(220,230,220,0.3)',
      hoverBackgroundColor: 'rgba(220,230,220,0.5)',
      captions: {
        align: 'center',
        display: true,
        color: 'red',
        font: {
          size: 14,
        },
        hoverFont: {
          size: 16,
          weight: 'bold'
        },
        padding: 5
      }
    }]

每个数据点值都在“键”和“组”中处理，我希望数据集中有类似的属性。对于如何设置颜色的任何帮助将不胜感激。

【问题讨论】：

那么你想为treemap的每个部分设置不同的颜色吗？
@GRD 是的......每个部分都代表一个产品......我希望每个产品都有不同的颜色。
不完全......实际代码给出了一个错误，chart.helpers.color..“属性'helpers'在typeof Chart上不存在”。此外，我需要控制实际的颜色……stackblitz 示例确实有效，但无法控制颜色……有些无法区分。
您能详细解释一下不可区分对您意味着什么吗？
@grd 好的......视觉上不同......所以我找到了数据集索引（ctx.raw._data._idx），我可以创建自己的不同颜色数组并使用这个索引为每个数据点分配不同的颜色......我将发布一些可能的答案。

标签： angular chart.js treemap

【解决方案1】：

控制分配给树形图中每个矩形（数据点）的颜色。数据集数组的索引隐藏在 ctx.raw._data._idx 中。因此，您可以创建自己的颜色数组并为每个数据点分配特定颜色：

  datasets.backgroundColor: (ctx)=>this.getColor(ctx)

在getColor中

   getColor(ctx) { 
   const colors = [arrray of colors];
   if (ctx.type==='data') {
      return colors[ctx.raw._data._idx];  
   }
  else return 'transparent';
}

【讨论】：