如何用JavaScript（Google Charts/Chart.js）实现多X轴图表？

我来帮你搞定这个多X轴图表的需求！你提到的Excel示例图应该是这样的结构：X轴分为上下两层，上层是月份分组（比如Ene、Feb、Mar、Abr），下层是五位管理者（Gestor A-E）；每个管理者对应每个月份的两组柱状数据，分别代表Activo和Inactivo的数值。你之前的Google Charts代码没成功，主要是数据结构和配置没处理好多层级X轴的逻辑，下面给你两个可行的方案，分别用Google Charts和Chart.js实现：

Google Charts可以通过系列分组+注释标签的方式模拟双层X轴效果，核心是把每个月份的Activo/Inactivo拆分为独立系列，再手动添加上层的月份分组标签。

完整可运行代码 #

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // 重新整理数据：管理者为底层X轴，每个月份的Activo/Inactivo作为独立系列
  var data = google.visualization.arrayToDataTable([
    ['Gestor', 'Ene Activo', 'Ene Inactivo', 'Feb Activo', 'Feb Inactivo', 'Mar Activo', 'Mar Inactivo', 'Abr Activo', 'Abr Inactivo'],
    ['Gestor A', 165, 100, 938, 800, 522, 100, 998, 1000],
    ['Gestor B', 135, 90, 1120, 1000, 599, 1000, 1268, 700],
    ['Gestor C', 157, 70, 1167, 800, 587, 400, 807, 900],
    ['Gestor D', 139, 160, 1110, 1200, 615, 500, 968, 1000],
    ['Gestor E', 136, 200, 691, 800, 629, 700, 1026, 1200]
  ]);

  var options = {
    title: 'Gestor Activo/Inactivo por Mes',
    vAxis: {title: 'Cantidad', minValue: 0},
    // 配置系列颜色：同月份用同色系深浅区分Activo/Inactivo，不同月份用不同颜色
    series: {
      0: {color: '#3366CC'}, // Ene Activo
      1: {color: '#6699FF'}, // Ene Inactivo
      2: {color: '#DC3912'}, // Feb Activo
      3: {color: '#FF6633'}, // Feb Inactivo
      4: {color: '#FF9900'}, // Mar Activo
      5: {color: '#FFCC66'}, // Mar Inactivo
      6: {color: '#109618'}, // Abr Activo
      7: {color: '#33CC33'}  // Abr Inactivo
    },
    // 启用分组柱状图，让每个管理者下的月份系列并排展示
    bar: {groupWidth: '75%'},
    // 添加上层月份分组标签，模拟双层X轴
    annotations: {
      textStyle: {fontSize: 12, bold: true},
      annotations: [
        {x: 0.125, y: -0.1, text: 'Ene', position: 'out'},
        {x: 0.375, y: -0.1, text: 'Feb', position: 'out'},
        {x: 0.625, y: -0.1, text: 'Mar', position: 'out'},
        {x: 0.875, y: -0.1, text: 'Abr', position: 'out'}
      ]
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

关键说明 #

• 数据结构：把每个月份的两个状态拆分为独立系列，确保每个管理者下能展示对应月份的两组柱子
• 颜色区分：用同色系深浅区分Activo/Inactivo，不同月份用不同颜色，提升可读性
• 双层X轴：通过annotations手动定位月份标签在对应分组上方，完美模拟Excel的双层X轴效果

Chart.js对多层X轴的支持更原生，直接通过配置额外的X轴即可实现层级效果。

完整可运行代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="width: 900px; height: 500px;">
  <canvas id="myChart"></canvas>
</div>

<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Gestor A', 'Gestor B', 'Gestor C', 'Gestor D', 'Gestor E'],
    datasets: [
      {label: 'Ene Activo', data: [165,135,157,139,136], backgroundColor: '#3366CC'},
      {label: 'Ene Inactivo', data: [100,90,70,160,200], backgroundColor: '#6699FF'},
      {label: 'Feb Activo', data: [938,1120,1167,1110,691], backgroundColor: '#DC3912'},
      {label: 'Feb Inactivo', data: [800,1000,800,1200,800], backgroundColor: '#FF6633'},
      {label: 'Mar Activo', data: [522,599,587,615,629], backgroundColor: '#FF9900'},
      {label: 'Mar Inactivo', data: [100,1000,400,500,700], backgroundColor: '#FFCC66'},
      {label: 'Abr Activo', data: [998,1268,807,968,1026], backgroundColor: '#109618'},
      {label: 'Abr Inactivo', data: [1000,700,900,1000,1200], backgroundColor: '#33CC33'}
    ]
  },
  options: {
    responsive: true,
    plugins: {title: {display: true, text: 'Gestor Activo/Inactivo por Mes'}},
    scales: {
      y: {beginAtZero: true, title: {display: true, text: 'Cantidad'}},
      // 底层X轴：管理者
      x: {title: {display: true, text: 'Gestor'}},
      // 上层X轴：月份分组
      x1: {
        type: 'category',
        position: 'top',
        labels: {
          callback: (val, idx) => {
            const months = ['Ene', 'Feb', 'Mar', 'Abr'];
            // 每两个系列对应一个月份，所以隔一个索引显示月份标签
            return idx % 2 === 0 ? months[Math.floor(idx/2)] : '';
          },
          maxRotation: 0
        },
        grid: {display: false},
        offset: true
      }
    }
  }
});
</script>

关键说明 #

• 双层X轴配置：新增x1轴并设置position: 'top'，通过ticks.callback生成月份标签
• 系列分组：每个月份的两个状态作为独立系列，Chart.js会自动在每个管理者下并排展示
• 样式优化：隐藏上层X轴的网格线，避免干扰底层X轴的展示

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