如何解决嵌入JS的HTML内容在垂直下拉标签页仅首个Tab显示的问题

• 你每个嵌入块里的canvas都用了同一个mychart2的ID，这在HTML里是大忌：浏览器遇到重复ID时，getElementById永远只会返回页面里第一个匹配到的元素，后面标签页里的同ID canvas根本拿不到，自然没法把图表渲染上去。
• 没激活的标签页一般都是用display: none隐藏的，这种状态下里面的canvas宽高计算值是0，就算ID没问题，Chart.js刚启动的时候算出来画布大小是0，根本画不出东西；而且图表不会自动感知标签页切换，等你切过去的时候，它也不会自动重算尺寸重新渲染。
• 每个嵌入块都重复引一遍Chart.js的脚本，虽然有缓存，但反复执行脚本会把全局的Chart构造函数反复覆盖，很容易出初始化冲突的问题。

• 给每个标签页里的canvas分配不重复的唯一ID：比如前端薪资表的ID叫frontendSalaryChart，后端方向的就叫backendSalaryChart，每个嵌入块里脚本取元素的时候，只取自己块里对应的ID，别跟其他块重名。
• 别一进页面就把所有标签页的图表都初始化了，改成跟标签页的切换事件绑死：用户切到哪个标签页，就等这个标签页的内容完全显示出来（能拿到真实宽高了），再初始化对应图表：
  • 初始化前加个判断，别重复创建实例
  • 等用户切回已经初始化过的标签页时，调一下图表实例的resize()方法，重新算一下画布尺寸，适配当前容器大小
• 把那行引入Chart.js的公共脚本，挪到整个页面的最开头的公共区域，所有嵌入块里都删掉这行重复的引入，避免资源冲突。

你图例过滤的逻辑写得不对：

// 原错误写法
return !item.text.includes("10th - 90th Percentile" & "10th Percentile");

这里的单&是JS里的按位与运算符，不是逻辑判断，会导致这段过滤代码完全不生效。要改成双&&的逻辑与：

// 修正后
return !item.text.includes("10th - 90th Percentile") && !item.text.includes("10th Percentile");

<!-- 某个标签页里的嵌入代码，ID跟其他块不重复 -->
<canvas id="frontendSalaryChart" width="500" height="500"></canvas>
<script>
// 这个函数绑定到对应标签页的切换事件，切到这页就调它
function initFrontendSalaryChart() {
  // 避免重复初始化
  if (window.frontendSalaryChart) return;
  const canvas = document.getElementById('frontendSalaryChart');
  const ctx = canvas.getContext('2d');
  const decimals = 0;
  // 这里直接粘你原来写好的图表配置就行
  const config = { /* 你原本的折线图配置对象 */ }
  // 把实例存到全局，方便后续切页时调resize
  window.frontendSalaryChart = new Chart(ctx, config);
  // 初始化完立刻适配容器大小
  window.frontendSalaryChart.resize();
}
</script>

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