Chart.js混合图表：如何遍历折线数据集数据避免重复编写

• 核心思路：利用JavaScript数组的内置方法快速生成对应长度的重复数据，彻底告别手动重复编写数值的麻烦。

方法1：用Array.fill()生成固定重复值 #

如果你只需要所有数据点都是同一个固定值（比如例子里的四个50），这个方法最直接高效：

// 先单独定义标签数组，方便后续复用和同步长度
const labels = ['January', 'February', 'March', 'April'];
const options = {}; // 替换成你实际的图表配置项

var mixedChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [
      {
        label: 'Bar Dataset',
        data: [10, 20, 30, 40]
      },
      {
        label: 'Line Dataset',
        // 根据标签的数量自动生成对应个数的50，不用手动写四次
        data: Array(labels.length).fill(50),
        type: 'line'
      }
    ],
    labels: labels
  },
  options: options
});

方法2：用Array.map()生成动态数据（更灵活） #

如果后续你需要根据标签或其他逻辑生成数据（而非固定值），map方法会更适配，比如每个数据点是动态计算的结果：

const labels = ['January', 'February', 'March', 'April'];
const options = {};

var mixedChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [
      {
        label: 'Bar Dataset',
        data: [10, 20, 30, 40]
      },
      {
        label: 'Line Dataset',
        // 遍历标签数组，每个元素对应生成一个值（这里可替换成你的自定义计算逻辑）
        data: labels.map(() => 50),
        type: 'line'
      }
    ],
    labels: labels
  },
  options: options
});

额外说明 #

• 两种方法都能自动同步数据长度和标签长度，后续如果标签数量变化（比如新增月份），不用手动修改数据数组的长度。
• 要是需要非固定值，比如每个数据点对应标签的特定计算结果，只需要修改fill或map里的逻辑即可，比如labels.map((month) => month.length * 10)。

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