ChartJS最新版本如何通过脚本为指定索引的单个柱状条设置颜色

你之前的操作无法生效，本质是配置结构不符合ChartJS的渲染规则：

• 当datasets下的backgroundColor、borderColor配置为单值字符串时，ChartJS会将该值全局应用到数据集内的所有柱状条，不会识别逐索引的颜色映射逻辑。
• 你尝试通过myBarChart.data.datasets[0].backgroundColor[0]赋值的操作，本质是在字符串对象上新增了一个索引属性，这个值根本不在图表的渲染读取路径上，自然不会生效。

• 初始化图表时，将数据集的backgroundColor、borderColor配置为空数组结构，替代原本的单值字符串配置：

  datasets: [{
      label: "Valor",
      backgroundColor: [], // 原单值字符串改为空数组
      borderColor: [],     // 原单值字符串改为空数组
      data: [],
  }]
  

• 在完成图表的labels、data数据填充后，先为所有柱状条批量生成默认色值（和你原本的全局色保持一致即可）：

  const targetDataset = myBarChart.data.datasets[0];
  const defaultBarColor = "rgba(2,117,216,1)";
  // 按照柱子数量批量填充默认颜色
  targetDataset.backgroundColor = targetDataset.data.map(() => defaultBarColor);
  targetDataset.borderColor = targetDataset.data.map(() => defaultBarColor);
  

• 针对需要自定义颜色的指定索引柱状条，直接替换数组对应位置的色值即可，比如需要将索引为3的柱子设置为橙色：

  const customIndex = 3;
  targetDataset.backgroundColor[customIndex] = "rgba(255,152,0,1)";
  targetDataset.borderColor[customIndex] = "rgba(255,152,0,1)";
  

• 所有颜色配置完成后，调用myBarChart.update()方法触发重渲染，修改才会真正展示在页面上。

补充说明：该实现方式兼容ChartJS v2及以上的所有正式版本，不需要额外安装第三方插件。

内容的提问来源于stack exchange，提问作者Renan Nogueira