Chart.js中遍历映射final_water_supply数据集自动生成柱状图系列的实现方法

你可以提前把年份、对应配色按顺序存为配置数组，再通过Array.map()遍历final_water_supply自动生成datasets配置，无需手动逐个编写每个系列参数。

完整实现代码如下：

// 通用配置，后续新增年份仅需修改这两个数组即可
const YEAR_LIST = ['2015', '2016', '2017', '2018']
const COLOR_LIST = ['#D0D1E6', '#74A9CF', '#0570B0', '#023858']

var ctx = document.getElementById('mc').getContext('2d');

chartRef1 = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: sortedData,
    // 自动遍历生成所有柱状图系列
    datasets: final_water_supply.map((dataItem, index) => ({
      label: YEAR_LIST[index],
      stack: `Stack ${index + 1}`,
      data: dataItem,
      backgroundColor: COLOR_LIST[index],
      borderColor: COLOR_LIST[index]
    }))
  },
  // 原有其他配置（如options等）正常保留即可
})

如果后续数据集扩展到更多年份，仅需在YEAR_LIST和COLOR_LIST中按顺序补充对应年份和配色即可，无需修改生成逻辑，适配任意长度的final_water_supply数组。
注意要保证final_water_supply的元素顺序和YEAR_LIST的年份顺序一一对应，避免标签和数据匹配错误。

内容的提问来源于stack exchange，提问作者Phakamani Xulu