Chart.js多图表加载异常：仅第三个图表显示的解决方案咨询

核心问题分析 #

1. 第一个图表（chartAge）无初始化代码：HTML中存在id="chartAge"的canvas，但JS里完全没有针对它的Chart实例创建逻辑，导致无法渲染。
2. DOM加载顺序问题：如果JS代码在DOM元素加载前执行，会出现获取不到canvas元素的情况，导致图表无法初始化。

修复后的完整代码 #

HTML部分

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="content">
  <div class="box age">
    <div class="chart-parent">
      <canvas id="chartAge"></canvas>
    </div>
  </div>
  <div class="box ethnicity">
      <canvas id="myChart"></canvas>
  </div>
  <div class="box both">
    <div class="chart-parent">
      <canvas id="chart"></canvas>
    </div>
    <div class="description">
      <h1>Race/Ethnicity vs. Age</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Exercitationem placeat unde illum doloremque cumque beatae 
      veritatis nulla, culpa autem sed.</p>
    </div>
  </div>
</div>

<!-- 将JS代码放在body末尾，确保DOM元素已加载 -->
<script>
/* 第一个图表：Age相关图表 */
const ageCtx = document.getElementById('chartAge');
new Chart(ageCtx, {
  type: 'bar', // 可根据需求修改图表类型
  data: {
    labels: ['Younger Than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
    datasets: [{
      label: 'Age Distribution',
      data: [15, 35, 30, 18, 2],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

/* Race/Ethnicity vs Age */ 
const data = {
    datasets: [{
        label: 'Races/Ethnicities Killed',
        data: [20, 30, 30, 40, 50],
        backgroundColor: 'rgba(255, 26, 104, 0.2)',
        borderColor: 'rgba(255, 26, 104, 1)',
        tension: 0.4,
        yAxisID: 'y'     
    }, 
    {
        label: 'Ages Killed',
        data: [10, 20, 30, 40, 50],
        backgroundColor: 'rgba(0, 26, 104, 0.2)',
        borderColor: 'rgba(0, 26, 104, 1)',
        tension: 0.4,
    }]
};

const config = {
  type: 'line',
  data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
        type: 'linear',
        position: 'left'
      },
      x1: {
        labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
      },
      x2: {
        position: 'top',
        labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
      },
    }
  }
};

const myChart = new Chart(
  document.getElementById('chart'),
  config
);

/* Race */
const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
</script>

关键修改说明 #

1. 补充第一个图表的初始化代码：新增了针对chartAge的Chart实例，你可以根据实际需求修改图表类型、数据和样式。
2. 调整JS代码位置：将所有JS代码移到HTML末尾，确保在DOM元素全部加载完成后再执行，避免因获取不到canvas元素导致图表无法渲染。
3. 保持ID匹配：确保每个Chart实例的getElementById参数与HTML中canvas的id完全对应。

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