ChartJS结合下拉框：默认图表显示与未选中图表隐藏问题求解

你现在碰到的核心问题应该是默认图表出不来，而且切换下拉框时没法隐藏没选中的图表，还要考虑以后加新图表的扩展性对吧？我给你一套实用还容易扩展的实现方案，一步步来解决这些问题：

一、先把DOM结构理清楚 #

首先给每个图表的容器（或者直接给canvas）加个统一的类名，同时每个canvas要有唯一ID，下拉框的选项值要对应这些ID——这样后面批量操作元素会方便很多：

<!-- 下拉选择框 -->
<select id="chartSelector">
  <option value="barChart">柱状图（默认）</option>
  <option value="lineChart">折线图</option>
  <option value="pieChart">饼图</option>
  <!-- 以后加新图表直接在这加option就行 -->
</select>

<!-- 图表容器：每个容器用统一类名，里面的canvas带唯一ID -->
<div class="chart-container">
  <canvas id="barChart"></canvas>
</div>
<div class="chart-container">
  <canvas id="lineChart"></canvas>
</div>
<div class="chart-container">
  <canvas id="pieChart"></canvas>
</div>

再写点基础CSS，默认把所有图表容器藏起来，只有带active类的才显示：

.chart-container {
  display: none;
  margin: 20px 0;
}
.chart-container.active {
  display: block;
}

二、统一管理Chart实例，别零散创建 #

别每次用图表都单独new Chart，把所有实例存到一个对象里，后面切换的时候直接调用就行。初始化的时候先把所有图表都创建好，再设置默认显示的那个：

// 专门存所有Chart实例的对象，方便后续操作
const chartInstances = {};

// 初始化所有图表的函数
function initCharts() {
  // 先准备好各个图表的数据（你可以换成自己的初始化数据）
  const barData = {
    labels: ['一月', '二月', '三月'],
    datasets: [{ label: '销量', data: [12, 19, 3] }]
  };
  const lineData = {
    labels: ['一月', '二月', '三月'],
    datasets: [{ label: '访问量', data: [22, 15, 28] }]
  };
  const pieData = {
    labels: ['苹果', '香蕉', '橙子'],
    datasets: [{ data: [30, 40, 30] }]
  };

  // 创建每个图表实例，并存到chartInstances里
  chartInstances.barChart = new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: barData
  });
  chartInstances.lineChart = new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: lineData
  });
  chartInstances.pieChart = new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: pieData
  });

  // 页面加载完成后，默认显示柱状图
  showChart('barChart');
}

// 核心切换函数：显示指定图表，隐藏其他所有图表
function showChart(targetChartId) {
  // 先把所有图表容器的active类去掉（全部隐藏）
  document.querySelectorAll('.chart-container').forEach(container => {
    container.classList.remove('active');
  });
  // 给目标图表的容器加上active类（显示它）
  document.getElementById(targetChartId).closest('.chart-container').classList.add('active');
}

// 给下拉框加切换事件
document.getElementById('chartSelector').addEventListener('change', function() {
  const selectedId = this.value;
  showChart(selectedId);
});

// 等页面DOM加载完再初始化图表，避免拿不到canvas元素
window.addEventListener('DOMContentLoaded', initCharts);

三、后续加新图表的最优姿势 #

为了以后加点状图、雷达图这类新图表时不用大改代码，我们可以把所有图表的配置抽成一个数组——新增图表只需要在数组里加一项就行，其他逻辑完全不用动：

// 把所有图表的配置统一放在这个数组里，一目了然
const chartConfigs = [
  {
    id: 'barChart',
    type: 'bar',
    label: '柱状图（默认）',
    data: {
      labels: ['一月', '二月', '三月'],
      datasets: [{ label: '销量', data: [12, 19, 3] }]
    }
  },
  {
    id: 'lineChart',
    type: 'line',
    label: '折线图',
    data: {
      labels: ['一月', '二月', '三月'],
      datasets: [{ label: '访问量', data: [22, 15, 28] }]
    }
  },
  {
    id: 'pieChart',
    type: 'pie',
    label: '饼图',
    data: {
      labels: ['苹果', '香蕉', '橙子'],
      datasets: [{ data: [30, 40, 30] }]
    }
  },
  // 以后加点状图？直接在这加个配置对象就行！
  {
    id: 'scatterChart',
    type: 'scatter',
    label: '点状图',
    data: {
      datasets: [{
        label: '随机数据',
        data: [{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 1}]
      }]
    }
  }
];

// 改造后的初始化函数，自动渲染下拉选项和创建图表
function initCharts() {
  const selector = document.getElementById('chartSelector');
  // 自动生成下拉框的选项，不用手动写HTML了
  chartConfigs.forEach(config => {
    const option = document.createElement('option');
    option.value = config.id;
    option.textContent = config.label;
    // 自动设置默认选中项
    if (config.label.includes('默认')) {
      option.selected = true;
    }
    selector.appendChild(option);
  });

  // 自动创建所有Chart实例
  chartConfigs.forEach(config => {
    chartInstances[config.id] = new Chart(document.getElementById(config.id), {
      type: config.type,
      data: config.data
    });
  });

  // 找到默认图表并显示
  const defaultChart = chartConfigs.find(config => config.label.includes('默认'));
  showChart(defaultChart.id);
}

这样以后加任何新图表，只需要做两件事：

1. 在chartConfigs数组里加对应的配置对象；
2. 在HTML里加一个带对应ID的canvas和chart-container容器；
   剩下的逻辑完全不用改，非常省心。

四、几个关键注意事项（帮你排查问题） #

1. 默认图表不显示：一定要等DOM加载完成再初始化图表（用DOMContentLoaded事件），不然会拿不到canvas元素；同时默认图表的容器要加上active类。
2. 没法隐藏未选中图表：用统一的chart-container类批量操作所有容器，别单独操作每个元素——这样就算以后加新图表，也不会遗漏隐藏逻辑。
3. 性能优化：初始化时就创建好所有Chart实例，切换时只控制显示隐藏，别每次切换都重新创建实例，这样性能会好很多。

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