Google Charts双X轴柱状图含0值显示异常问题求助

我之前碰到过一模一样的情况！当双系列柱状图里某一组只有一个非零值（另一个是0）时，Google Charts默认会把这个柱子拉宽到整个类别宽度，看起来就像是没居中。结合你的数据场景（0代表未参与且不会参与的人员，不能直接去掉），这里有个精准的解决办法：

核心思路 #

通过调整分组宽度配置，强制单个柱子在类别中心显示，同时把0值对应的柱子宽度设为0（避免占位），这样既保留了数据的完整性，又解决了对齐问题。

完整代码示例 #

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 你的原始数据
  var data = google.visualization.arrayToDataTable([
    ['名称', 'person1Score', 'person2Score'],
    ['ORG', 30, 40],
    ['OTH', 15, 20],
    ['PAX', 20, 0],
    ['FM', 35, 30],
    ['CRW', 25, 0],
    ['TRX', 0, 30],
    ['WEA', 0, 20]
  ]);

  var options = {
    title: '人员测试分数对比',
    bars: 'vertical',
    isStacked: false,
    // 关键：设置分组宽度，让单个柱子居中
    bar: { groupWidth: '40%' },
    hAxis: {
      title: '类别',
      textStyle: { fontSize: 12 }
    },
    vAxis: {
      title: '分数',
      minValue: 0
    },
    series: {
      // 给两个系列设置动态宽度：0值柱子宽度为0，不占位
      0: {
        style: {
          width: function(dataValue) {
            return dataValue === 0 ? 0 : undefined;
          }
        }
      },
      1: {
        style: {
          width: function(dataValue) {
            return dataValue === 0 ? 0 : undefined;
          }
        }
      }
    }
  };

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

关键配置说明 #

• bar.groupWidth: '40%'：这个设置让每个类别下的柱子分组总宽度占类别宽度的40%，即使分组里只有一个柱子，它也会自动居中在这个范围内，不会拉满整个类别宽度。
• 系列的style.width回调：当数据值为0时，把对应柱子的宽度设为0，这样0值的柱子不会显示也不会占据空间，确保非零的柱子能完美居中在类别下方。

这样调整后，CRW、TRX这类只有一个有效分数的条目，对应的柱子就会准确居中在它们的类别标签上方了。

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