如何通过循环简化多Highcharts图表重复代码？

完全可以通过forEach（或for循环）大幅减少重复代码，核心思路是把每个图表的差异化数据抽成配置数组，再统一遍历创建图表，具体实现如下：

1. 整理差异化配置数组 #

把每个图表独有的chartNumber、containerNumber、id、文本、数据、初始校验逻辑等，整理成配置对象数组，每个对象对应一个图表的差异化参数：

// 示例配置数组，根据实际需求补充完整50+个图表的配置
const chartConfigs = [
  {
    chartNumber: 1,
    containerNumber: 1,
    id: 'chart-1',
    titleText: '图表1的标题文本',
    subtitleText: '图表1的副标题',
    data: [12, 34, 23, 56],
    initialCheck: () => {
      // 图表1的初始校验逻辑，返回布尔值
      return document.getElementById('chart-1') !== null;
    }
  },
  {
    chartNumber: 2,
    containerNumber: 2,
    id: 'chart-2',
    titleText: '图表2的标题文本',
    subtitleText: '图表2的副标题',
    data: [45, 22, 78, 31],
    initialCheck: () => {
      // 图表2的初始校验逻辑
      return window.someGlobalData?.chart2Enabled;
    }
  }
  // 剩余48+个图表的配置对象依次添加
];

2. 遍历配置数组创建图表 #

用forEach遍历配置数组，复用通用的图表创建逻辑，只在需要的地方插入差异化参数：

// 统一创建所有Highcharts图表
chartConfigs.forEach(config => {
  // 先执行初始校验，不通过则跳过创建
  if (!config.initialCheck()) return;

  // 创建图表，通用配置统一写，差异化参数从config中取
  Highcharts.chart(config.id, {
    chart: {
      type: 'line' // 通用图表类型，若有特殊类型可在config中加type字段
    },
    title: {
      text: config.titleText
    },
    subtitle: {
      text: `${config.subtitleText}（容器${config.containerNumber}）`
    },
    xAxis: {
      categories: ['一月', '二月', '三月', '四月'] // 通用类目，特殊的可在config中定义
    },
    series: [
      {
        name: `数据系列${config.chartNumber}`,
        data: config.data
      }
    ]
    // 其他通用配置项统一在这里定义
  });
});

3. 处理特殊图表的个性化配置 #

如果部分图表有特殊配置（比如不同的图表类型、自定义tooltip），可以在配置对象中添加可选字段，遍历的时候判断是否存在再合并：

// 示例：给某个图表添加特殊配置
const chartConfigs = [
  {
    // ...其他参数
    chartType: 'column', // 可选字段，覆盖通用类型
    tooltip: {
      formatter: function() {
        return `${this.x}: ${this.y} 单位`;
      }
    }
  }
];

// 遍历创建时的处理
chartConfigs.forEach(config => {
  if (!config.initialCheck()) return;

  // 基础通用配置
  const baseOptions = {
    chart: { type: 'line' },
    title: { text: config.titleText },
    // ...其他通用配置
  };

  // 合并特殊配置
  if (config.chartType) baseOptions.chart.type = config.chartType;
  if (config.tooltip) baseOptions.tooltip = config.tooltip;

  // 创建图表
  Highcharts.chart(config.id, baseOptions);
});

这种方式能把重复的创建逻辑压缩到一份代码里，后续新增或修改图表只需要调整配置数组，大幅提升代码的可维护性。

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