如何将多维数组完整传入JSON数据以填充图表变量

我来帮你搞定这个问题！其实Chart.js的datasets本身就是一个数组，刚好可以承载你多组的销售数据——我们只需要循环遍历你的多维数组，动态生成每一组数据对应的配置项就行。

核心思路 #

你的数组结构已经很清晰了：

• arr_amount[0]是所有数据共用的X轴标签，不需要改动
• arr_proname和arr_salecount的行数一一对应，每一行代表一个产品的名称和销售数据
• 我们要做的就是遍历这两个数组的索引，为每个产品生成一个独立的dataset对象，最后把所有对象放进datasets数组里

完整实现代码 #

首先我们可以准备一组不同的颜色（方便区分不同产品的线条），然后通过循环生成datasets：

// 你的原始数组
const arr_amount = [["0-200", "200-400", ">400"]]; 
const arr_proname = [["HSD", "Unlead"]]; 
const arr_salecount = [[10,20,15],[9,16,25]];

// 准备不同的配色方案，对应不同产品
const colors = [
  {
    bg: "rgba(59, 89, 152, 0.75)",
    border: "rgba(59, 89, 152, 1)"
  },
  {
    bg: "rgba(221, 75, 57, 0.75)",
    border: "rgba(221, 75, 57, 1)"
  }
];

// 初始化空的datasets数组
const datasets = [];

// 循环遍历每个产品的数据
for (let i = 0; i < arr_proname[0].length; i++) {
  datasets.push({
    label: arr_proname[0][i], // 取对应索引的产品名称
    fill: false,
    lineTension: 0.1,
    backgroundColor: colors[i].bg,
    borderColor: colors[i].border,
    pointHoverBackgroundColor: colors[i].border,
    pointHoverBorderColor: colors[i].border,
    data: arr_salecount[i] // 取对应索引的销售数据
  });
}

// 最终的chartdata配置
const chartdata = { 
  labels: arr_amount[0], 
  datasets: datasets // 把动态生成的datasets传进来
};

关键细节说明 #

1. 循环逻辑：这里我们遍历arr_proname[0]的长度，因为它的元素个数就是你要展示的产品数量，同时对应arr_salecount的行数
2. 颜色适配：如果后续产品数量增加，只需要在colors数组里新增对应的配色即可
3. 数据对应：确保arr_proname[0][i]和arr_salecount[i]是一一对应的，这样每个产品的名称和数据才不会错位

这样配置后，Chart.js就能自动渲染出两条（或更多）不同的线条，分别对应每个产品的销售数据啦。

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