Google Chart Combo Chart柱状图不显示及强制纵轴起始值需求

Yep, I’ve dealt with this frustrating quirk in Google Charts Combo Charts before! The issue happens because when all your bar data points are identical (or extremely close), Google Charts automatically adjusts the vertical axis range to match exactly between the minimum and maximum data values. Since there’s no difference between them, the bars end up with zero height and become invisible.

The Solution: Force a Fixed Vertical Axis Starting Value #

You can easily fix this by explicitly setting the minimum value for the vertical axis using the viewWindow.min property in your vAxis options. This overrides Google’s automatic scaling and ensures your bars have visible height.

Updated Example Code

Here’s how to modify your existing code to lock the vertical axis start at 870:

<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() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05', 880, 938 ],
    ['2004/06', 880, 938 ]
  ]);
  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      viewWindow: {
        min: 870 // Force vertical axis to start at 870
      }
    },
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };
  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

Dynamic Scaling (Optional) #

If you don’t want to hardcode a fixed minimum value (e.g., if your data changes dynamically), you can calculate the minimum value from your dataset and subtract a small offset to ensure bars are visible:

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05', 92, 95 ],
    ['2004/06', 92, 95 ]
  ]);
  
  // Get the minimum value from the Bolivia column (index 1)
  var minBarValue = data.getColumnRange(1).min;
  
  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      viewWindow: {
        min: minBarValue - 5 // Subtract 5 to create space for the bars
      }
    },
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };
  
  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

This approach keeps your chart flexible while ensuring bars are always visible, even when all bar values are identical or very close.

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