多图表性能优化：按需创建图表并共用X轴

需求与现有问题 #

• 实现共用X轴的多图表展示，仅最后一个被选中显示的图表启用X轴标签
• 当前实现初始化时直接创建全部4个图表，即使仅选中一个图表，updateCharts方法仍会被调用4次，存在性能冗余，需要改为勾选复选框时才首次创建对应图表

解决方案代码实现 #

HTML结构

<div>
  <label><input type="checkbox" id="checkbox1" checked> 图表1</label>
  <label><input type="checkbox" id="checkbox2"> 图表2</label>
  <label><input type="checkbox" id="checkbox3"> 图表3</label>
  <label><input type="checkbox" id="checkbox4"> 图表4</label>
</div>
<div id="chart1" class="chart-container"></div>
<div id="chart2" class="chart-container"></div>
<div id="chart3" class="chart-container"></div>
<div id="chart4" class="chart-container"></div>

JavaScript逻辑

// 全局变量：存储已创建的图表，避免重复初始化
const createdCharts = {};
// 图表基础配置模板
const baseChartConfig = {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
};
// 容器总高度
const height = 600;

// 创建单个图表的函数
function createChart(chartId) {
  createdCharts[chartId] = Highcharts.chart(`chart${chartId}`, {
    ...baseChartConfig,
    id: chartId,
    chart: {
      height: height
    },
    xAxis: {
      ...baseChartConfig.xAxis,
      labels: {
        enabled: false // 默认隐藏X轴标签，后续统一控制
      }
    }
  });
}

// 初始化已勾选的图表
document.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => {
  const chartId = checkbox.id.replace('checkbox', '');
  createChart(chartId);
});

// 更新图表布局与X轴标签
function updateCharts() {
  console.log("updatecharts called");
  // 获取所有选中的图表ID
  const selectedChartIds = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
    .map(checkbox => checkbox.id.replace('checkbox', ''));
  
  const checkedCount = selectedChartIds.length;
  if (checkedCount === 0) return;
  
  // 最后一个选中的图表索引
  const lastSelectedIndex = checkedCount - 1;
  
  // 遍历选中的图表，更新配置
  selectedChartIds.forEach((chartId, index) => {
    const chart = createdCharts[chartId];
    if (chart) {
      chart.update({
        chart: {
          height: height / checkedCount
        },
        xAxis: {
          labels: {
            enabled: index === lastSelectedIndex
          }
        }
      });
    }
  });
}

// 绑定复选框事件
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const chartId = this.id.replace('checkbox', '');
    if (this.checked) {
      // 勾选时，若未创建则初始化图表
      if (!createdCharts[chartId]) {
        createChart(chartId);
      }
    } else {
      // 取消勾选时，销毁图表节省资源（可选，根据需求调整）
      if (createdCharts[chartId]) {
        createdCharts[chartId].destroy();
        delete createdCharts[chartId];
      }
    }
    // 更新所有选中图表的布局与标签
    updateCharts();
  });
});

// 初始化完成后执行一次更新
setTimeout(updateCharts, 0);

关键优化点说明 #

1. 按需初始化图表：用createdCharts对象记录已创建的图表，仅在复选框首次勾选时调用Highcharts.chart初始化，避免一次性创建全部图表的性能开销
2. 精简updateCharts逻辑：仅遍历当前选中的已创建图表，不再处理未选中的图表，减少无效调用
3. X轴标签控制：通过计算选中图表的索引，仅为最后一个图表启用X轴标签，符合需求
4. 可选销毁逻辑：取消勾选时可销毁对应图表，进一步释放资源（若不需要保留图表状态可启用）

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