如何使用纯html、css、js在两个绘图图表之间切换

<div id="chart1"></div>
<div id="chart2"></div>

#chart1, #chart2 {
  width: 400px;
  height: 300px;
  display: none; /* 初始状态隐藏一个图表 */
}

// 获取图表容器元素
var chart1 = document.getElementById('chart1');
var chart2 = document.getElementById('chart2');

// 获取切换按钮元素
var switchBtn = document.getElementById('switchBtn');

// 监听切换按钮的点击事件
switchBtn.addEventListener('click', function() {
  // 判断当前显示的图表是哪一个
  if (chart1.style.display === 'none') {
    // 如果chart1隐藏，则显示chart2，隐藏chart1
    chart2.style.display = 'block';
    chart1.style.display = 'none';
  } else {
    // 如果chart1显示，则显示chart1，隐藏chart2
    chart1.style.display = 'block';
    chart2.style.display = 'none';
  }
});

<button id="switchBtn">切换图表</button>